Canvas Clock
- Previous Page Canvas Image
- Next Page Clock Face
In de volgende hoofdstukken zullen we een virtuele klok bouwen met behulp van HTML-canvas.
Eerste deel - Maak canvas aan
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>
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>
Code uitleg
Voeg de HTML <canvas> element toe aan uw pagina:
<canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas>
Maak een canvasobject aan (const canvas):
const canvas = document.getElementById("canvas");
Maak een 2d tekenobject aan voor het canvasobject (const ctx):
const ctx = canvas.getContext("2d");
Gebruik de hoogte van het canvas om de straal van de klok te berekenen:
let radius = canvas.height / 2;
Tip
Gebruik de hoogte van het canvas om de straal van de klok te berekenen, zodat de klok past op alle canvasafmetingen.
Herkaart de positie (0,0) van het tekenobject naar het midden van het canvas:
ctx.translate(radius, radius);
Verklein de klokstraal (tot 90%) en teken de klok binnenin het canvas:
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();
{}
See also:
- Previous Page Canvas Image
- Next Page Clock Face
