Reloj de lona
En estos capítulos construiremos un reloj analógico utilizando un lienzo HTML.
Parte I - Crear el lienzo
El reloj necesita un contenedor HTML. Crea un lienzo HTML:
Código HTML:
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="400"
height="400" style="background-color:#333"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
drawClock();
function drawClock() {
ctx.arc(0, 0, radius, 0 , 2 * Math.PI);
ctx.fillStyle = "white";
ctx.fill();
}
</script>
</body>
</html>
Código explicado
Agregue un elemento HTML <canvas> a su página:
<canvas id="canvas" width="400"
height="400" style="background-color:#333"></canvas>
Cree un objeto de lienzo (var canvas) a partir del elemento de lienzo HTML:
var canvas =
document.getElementById("canvas");
Cree un objeto de dibujo 2d (var ctx) para el objeto de lienzo:
var ctx = canvas.getContext("2d");
Calcula el radio del reloj, usando la altura del lienzo:
var radius
= canvas.height / 2;
El uso de la altura del lienzo para calcular el radio del reloj hace que el reloj funcione para todos los tamaños de lienzo.
Vuelva a asignar la posición (0,0) (del objeto de dibujo) al centro del lienzo:
ctx.translate(radius, radius);
Reduzca el radio del reloj (al 90 %) para dibujar el reloj bien dentro del lienzo:
radius = radius * 0.90;
Crea una función para dibujar el reloj:
function drawClock() {
ctx.arc(0, 0, radius, 0 , 2 * Math.PI);
ctx.fillStyle =
"white";
ctx.fill();
}