Seil horlosie
In hierdie hoofstukke sal ons 'n analoog horlosie bou met behulp van HTML-doek.
Deel I - Skep die doek
Die horlosie benodig 'n HTML-houer. Skep 'n HTML-doek:
HTML-kode:
<!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>
Kode verduidelik
Voeg 'n HTML <canvas> element by jou bladsy:
<canvas id="canvas" width="400"
height="400" style="background-color:#333"></canvas>
Skep 'n doekvoorwerp (var-doek) vanaf die HTML-doekelement:
var canvas =
document.getElementById("canvas");
Skep 'n 2d-tekenvoorwerp (var ctx) vir die doekvoorwerp:
var ctx = canvas.getContext("2d");
Bereken die klokradius deur die hoogte van die doek te gebruik:
var radius
= canvas.height / 2;
Deur die doekhoogte te gebruik om die klokradius te bereken, laat die horlosie vir alle doekgroottes werk.
Verander die (0,0) posisie (van die tekenvoorwerp) na die middel van die doek:
ctx.translate(radius, radius);
Verminder die klokradius (tot 90%) om die horlosie goed binne die doek te teken:
radius = radius * 0.90;
Skep 'n funksie om die horlosie te teken:
function drawClock() {
ctx.arc(0, 0, radius, 0 , 2 * Math.PI);
ctx.fillStyle =
"white";
ctx.fill();
}