首先第一步。
1 | <canvas id= "myCanvas" style= "border:1px red solid" width= "300px" ; height= "300px" ;></canvas>
|
登录后复制
然后
1 | var c=document.getElementById( "myCanvas" ); var ctx=c.getContext( "2d" );
|
登录后复制
定义一个绘制时钟的函数通过计时器每秒调用一次,默认首先通过函数名调用一次然后通过计时器调用。因为如果直接一开始用计时器调用就会比实际时间慢1s
1 2 | drawfun();
setInterval(drawfun,1000);
|
登录后复制
函数体内容:
1).每次调用前清除一次画布,所以放在第一行。
2).绘制时钟的外边框和圆心,很容易就不解释了。
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();
|
登录后复制
3).绘制小时和分钟的刻度。
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();
}
|
登录后复制
4).绘制小时数
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();
}
}
|
登录后复制
5).最后绘制时分秒指针
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();
|
登录后复制
以上是利用Canvas制作时钟的详细内容。更多信息请关注PHP中文网其他相关文章!