Première étape.
1 | <canvas id= "myCanvas" style= "border:1px red solid" width= "300px" ; height= "300px" ;></canvas>
|
Copier après la connexion
Puis
1 | var c=document.getElementById( "myCanvas" ); var ctx=c.getContext( "2d" );
|
Copier après la connexion
Définissez une fonction qui dessine l'horloge et l'appelez une fois par seconde via la minuterie. Par défaut, elle est appelée une fois via le nom de la fonction, puis appelée. grâce à la minuterie. Parce que si vous l'appelez directement avec une minuterie, ce sera 1 seconde plus lent que l'heure réelle
1 2 | drawfun();
setInterval(drawfun,1000);
|
Copier après la connexion
Contenu du corps de la fonction :
1). , alors mettez-le sur la première ligne.
Copier après la connexion
2). Dessiner le cadre extérieur et le centre de l'horloge est facile à expliquer.
1 2 3 4 5 6 7 | ctx.arc(150,150,100,0,2*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.fillStyle= "black" ;
ctx.arc(150,150,3,0,2*Math.PI);
ctx.fill();
|
Copier après la connexion
3). Dessinez les échelles des heures et des minutes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | for ( var i=0;i<60;i++){
ctx.save();
ctx.beginPath();
ctx.translate(150,150);
ctx.rotate(Math.PI*2/60*i);
ctx.moveTo(0,-99);
if (i%5==0){
ctx.strokeStyle = '#333';
ctx.lineWidth = 3;
ctx.lineTo(0,-87);
} else {
ctx.strokeStyle = '#ccc';
ctx.lineWidth = 2;
ctx.lineTo(0,-90);
}
ctx.stroke();
ctx.closePath();
ctx.restore();
}
|
Copier après la connexion
4) Dessinez les heures
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | for ( var i=0;i<60;i++){
ctx.beginPath();
var hudu = (2*Math.PI / 360) * 6 * i;
var X = 150 + Math.sin(hudu) * 80 - 3.5;
var Y = 150 - Math. cos (hudu) * 80 + 5;
if (i%5==0){ if (i==0){
ctx.fillText( "12" ,X-3,Y);
} else {
ctx.fillText( "" + i / 5 + "" ,X,Y);
}
ctx.stroke();
}
}
|
Copier après la connexion
5) Dessinez les dernières aiguilles des heures, des minutes et des secondes
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | var date = new Date ();
var Hour = date .getHours();
var Minute = date .getMinutes();
var Second = date .getSeconds();
ctx.beginPath();
ctx.translate(150, 150);
ctx.rotate(Math.PI * 2 / 60 * Second);
ctx.strokeStyle = 'red';
ctx.lineWidth = 1;
ctx.moveTo(0, 20);
ctx.lineTo(0, -70);
ctx.stroke();
ctx.closePath();
ctx.restore();
ctx.save();
ctx.beginPath();
ctx.translate(150, 150);
ctx.rotate(Math.PI * 2 / 60 * Minute+Math.PI * 2 / 60/60 * Second);
ctx.strokeStyle = 'black';
ctx.lineWidth = 1.5;
ctx.moveTo(0, 10);
ctx.lineTo(0, -60);
ctx.stroke();
ctx.closePath();
ctx.restore();
ctx.save();
ctx.beginPath();
ctx.translate(150, 150);
ctx.rotate(Math.PI * 2 / 12 * Hour+Math.PI * 2 / 60/12 * Minute+Math.PI * 2 / 60/60/12 * Second);
ctx.strokeStyle = 'black';
ctx.lineWidth = 2.5;
ctx.moveTo(0, 8);
ctx.lineTo(0, -35);
ctx.stroke();
ctx.closePath();
ctx.restore();
|
Copier après la connexion
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!