Dans ces chapitres, nous allons construire une horloge analogique en utilisant la toile HTML.
Partie I - Créer le canevas
L'horloge a besoin d'un conteneur HTML. Créer un canevas HTML 300 x 300 pixels:
Code HTML:
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="300"
height="300" 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>
Essayez - le vous - même » code Explained
Ajouter un HTML <canvas> élément à votre page:
<canvas id="canvas" width="300"
height="300" style="background-color:#333"></canvas>
Créer un objet de toile (toile var) à partir de l'élément canvas HTML:
var canvas =
document.getElementById("canvas");Créer un objet de dessin 2d (var ctx) pour l'objet de la toile:
var ctx = canvas.getContext("2d");Calculer le rayon d'horloge, en utilisant la hauteur de la toile:
var radius
= canvas.height / 2;Utilisation de la hauteur de la toile pour calculer le rayon d'horloge, rend le travail d'horloge pour toutes les tailles de toile.
Remappez la position (de l'objet de dessin) (0,0) au centre de la toile:
ctx.translate(radius, radius);Réduire le rayon d'horloge (à 90%) pour dessiner l'horloge bien à l'intérieur des toiles:
radius = radius * 0.90;Créer une fonction pour dessiner l'horloge:
function drawClock() {
ctx.arc(0, 0, radius, 0 , 2*Math.PI);
ctx.fillStyle =
"white";
ctx.fill();
}