En estos capítulos vamos a construir un reloj analógico utilizando la lona HTML.
Parte I - Crear el lienzo
El reloj necesita un contenedor HTML. Crear un lienzo HTML 300 x 300 píxeles:
Código HTML:
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="300"
height="300" 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>
Inténtalo tú mismo " código Explicación
Añadir una etiqueta <canvas> elemento a su página:
<canvas id="canvas" width="300"
height="300" style="background-color:#333"></canvas>
Crear un objeto canvas (lienzo var) del elemento canvas HTML:
var canvas =
document.getElementById("canvas");Crear un objeto de dibujo 2d (var ctx) para el objeto de la lona:
var ctx = canvas.getContext("2d");Calcular el radio reloj, usando la altura del lienzo:
var radius
= canvas.height / 2;El uso de la altura de la lona para calcular el radio reloj, hace que el reloj funcione para todos los tamaños de lona.
Reasignar la posición (0,0) (del objeto de dibujo) para el centro de la tela:
ctx.translate(radius, radius);Reducir el radio reloj (al 90%) para dibujar el reloj bien dentro de las lienzo:
radius = radius * 0.90;Crear una función para dibujar el reloj:
function drawClock() {
ctx.arc(0, 0, radius, 0 , 2*Math.PI);
ctx.fillStyle =
"white";
ctx.fill();
}