Orologio su Canvas

Nei prossimi capitoli, costruiremo un orologio simulato utilizzando il canvas HTML.

Prima parte - Creare il canvas

L'orologio necessita di un contenitore HTML. Creare un canvas HTML:

Codice 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>

Prova a fare tu stesso

Spiegazione del codice

Aggiungere l'elemento HTML <canvas> alla tua pagina:

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

Creare un oggetto canvas (const canvas):

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

Creare un oggetto di disegno 2d per l'oggetto canvas (const ctx):

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

Calcolare il raggio dell'orologio utilizzando l'altezza del canvas:

let radius = canvas.height / 2;

Suggerimento

Utilizzare l'altezza del canvas per calcolare il raggio dell'orologio, in modo che l'orologio si adatti a tutte le dimensioni dei canvas.

Reimpostare la posizione (0,0) dell'oggetto di disegno al centro del canvas:

ctx.translate(radius, radius);

Ridurre il raggio dell'orologio (fino al 90%) e disegnare l'orologio all'interno del canvas:

radius = radius * 0.90;

Creare la funzione per disegnare l'orologio:

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

Vedi anche:

Manuale completo di Canvas di CodeW3C.com