Relógio no Canvas

Nos próximos capítulos, usaremos o canvas HTML para construir um relógio simulado.

Primeira parte - Criar o canvas

O relógio precisa de um contêiner HTML. Crie um canvas 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>

Experimente você mesmo

Explicação do código

Adicionar o elemento HTML <canvas> à sua página:

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

Criar um objeto de tela (const canvas):

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

Criar um objeto de desenho 2d para o objeto de tela (const ctx):

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

Use a altura da tela para calcular o raio do relógio:

let radius = canvas.height / 2;

Dica

Use a altura da tela para calcular o raio do relógio, para que o relógio se ajuste ao tamanho de todas as telas.

Re-mapear a posição (0,0) do objeto de desenho para o centro da tela:

ctx.translate(radius, radius);

Diminuir o raio do relógio (até 90%), desenhando-o dentro da tela:

radius = radius * 0.90;

Criar a função de desenho do relógio:

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

Veja também:

Manual completo do Canvas no CodeW3C.com