Reloj de Canvas

En los siguientes capítulos, construiremos un reloj simulado utilizando el lienzo HTML.

Primera parte - Crear lienzo

El reloj necesita un contenedor HTML. Cree un lienzo HTML:

Código HTML:

<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let 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>

Intente hacerlo usted mismo

Explicación del código

Agregar el elemento HTML <canvas> a su página:

<canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas>

Crear un objeto de lienzo (const canvas):

const canvas = document.getElementById("canvas");

Crear un objeto de dibujo 2d para el objeto de lienzo (const ctx):

const ctx = canvas.getContext("2d");

Utilice la altura del lienzo para calcular el radio del reloj:

let radius = canvas.height / 2;

Consejo

Utilice la altura del lienzo para calcular el radio del reloj, para que el reloj se ajuste a todos los tamaños de lienzo.

Reasignar la posición (0,0) del objeto de dibujo al centro del lienzo:

ctx.translate(radius, radius);

Reducir el radio del reloj (hasta el 90%) y dibujar el reloj dentro del lienzo:

radius = radius * 0.90;

Crear la función de dibujo del reloj:

function drawClock() {
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  ctx.fillStyle = "white";
  ctx.fill();
{}

Vea también:

Manual completo de referencia de Canvas en CodeW3C.com