Canvas-kello

Seuraavissa luvuissa käytämme HTML-taulukkoa rakentaaksemme analogisen kellon.

Ensimmäinen osa - Luo taulukko

Kello tarvitsee HTML-konttorin. Luo HTML-taulukko:

HTML-koodi:

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

Kokeile itse

Koodin selitys

Lisää HTML <canvas> -elementti sivullesi:

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

Luo taulukkoobjekti (const canvas):

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

Luo taulukolle 2d piirtämisobjekti (const ctx):

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

Käytä taulukon korkeutta laskea kellon säde:

let radius = canvas.height / 2;

Vinkki

Käytä taulukon korkeutta laskea kellon säde, jotta kello sopii kaikkiin taulukon kohtiin.

Siirrä (piirtämisobjektin) (0,0) sijainti uudelleen taulukon keskelle:

ctx.translate(radius, radius);

Pienennä kellojen säde (90%:iin), piirrä kello taulukkoon:

radius = radius * 0.90;

Luo taulukon piirtämiseen:

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

Katso myös:

CodeW3C.com:n täydellinen Canvas viittausopas