Canvas klok
In deze hoofdstukken zullen we een analoge klok bouwen met behulp van HTML canvas.
Deel I - Maak het canvas
De klok heeft een HTML-container nodig. Maak een HTML-canvas:
HTML code:
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="400"
height="400" 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>
Code uitgelegd
Voeg een HTML <canvas>-element toe aan je pagina:
<canvas id="canvas" width="400"
height="400" style="background-color:#333"></canvas>
Maak een canvasobject (var canvas) van het HTML canvas-element:
var canvas =
document.getElementById("canvas");
Maak een 2D-tekenobject (var ctx) voor het canvasobject:
var ctx = canvas.getContext("2d");
Bereken de klokradius met behulp van de hoogte van het canvas:
var radius
= canvas.height / 2;
Door de canvashoogte te gebruiken om de klokradius te berekenen, werkt de klok voor alle canvasformaten.
Wijs de (0,0) positie (van het tekenobject) opnieuw toe aan het midden van het canvas:
ctx.translate(radius, radius);
Verklein de klokradius (tot 90%) om de klok goed in het canvas te tekenen:
radius = radius * 0.90;
Maak een functie om de klok te tekenen:
function drawClock() {
ctx.arc(0, 0, radius, 0 , 2 * Math.PI);
ctx.fillStyle =
"white";
ctx.fill();
}