利用html5的画布做数字钟

最新推荐文章于 2021-09-14 20:14:05 发布

天为我蓝

最新推荐文章于 2021-09-14 20:14:05 发布

阅读量125

点赞数

原文链接：http://www.cnblogs.com/hanling1103/p/9371961.html

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas指针时钟表特效 - 站长素材</title>
</head>
<body>
<center>
<canvas id="canvas" width="500" height="500"></canvas>
</center>
<script>
var can=document.getElementById("canvas");
var ctx=can.getContext("2d")
function timer(){
// ctx.save(); ctx.restore(); 是绘制图形不可少的是保存和恢复画布的状态
ctx.clearRect(0,0,500,500)//清除画布
ctx.beginPath();
ctx.lineWidth=10;
ctx.strokeStyle="greenyellow";
ctx.arc(250,250,210,0,Math.PI*2); //画圆函数
ctx.stroke();
ctx.closePath();
//分钟时刻
for(var i = 0 ;i < 60 ;i++){
ctx.save();//保存之前的状态
ctx.beginPath();
ctx.translate(250,250);//改变坐标轴x y的起始位置将原点设置成画布中间
ctx.rotate(i*6*Math.PI/180)//设置指针旋转
ctx.strokeStyle = '#000';
ctx.lineWidth = 4;
ctx.moveTo(0,-170);
ctx.lineTo(0,-185);
ctx.stroke();
ctx.closePath();
ctx.restore(); //恢复之前保存的绘图状态
}
//时针刻度
for(var i = 0; i < 12 ;i++){
ctx.save();
ctx.beginPath();
ctx.translate(250,250);
ctx.rotate(i*30*Math.PI/180);
ctx.strokeStyle="red";
ctx.lineWidth = 6;
ctx.moveTo(0,-160);
ctx.lineTo(0,-185);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
//刻度
for(var i = 0; i < 12;i++){
ctx.save();
ctx.beginPath();
ctx.translate(250,250);
ctx.rotate(i*30*Math.PI/180);
ctx.font="18px 宋体";
ctx.fillText(i,-7,-135);
ctx.closePath();
ctx.restore();
}
var time = new Date();//获取当前时间
var h=time.getHours();//获取当前的时钟
var m=time.getMinutes();//获取当前分钟
var s=time.getSeconds();//获取当前秒钟
//时
ctx.save();
ctx.beginPath();
ctx.translate(250,250);
ctx.rotate(h*30*Math.PI/180); //让指针转根据得到当前时间
ctx.strokeStyle = 'purple';
ctx.lineWidth = 8;
ctx.moveTo(0,10);
ctx.lineTo(0,-105);
ctx.stroke();
ctx.closePath();
ctx.restore();
//分
ctx.save();
ctx.beginPath();
ctx.translate(250,250);
ctx.rotate(m*6*Math.PI/180);
ctx.strokeStyle="deeppink";
ctx.lineWidth = 6;
ctx.moveTo(0,10);
ctx.lineTo(0,-120);
ctx.stroke();
ctx.closePath();
ctx.restore();
//秒钟
ctx.save();
ctx.beginPath();
ctx.translate(250,250);
ctx.rotate(s*6*Math.PI/180);
ctx.strokeStyle="red";
ctx.lineWidth = 4;
ctx.moveTo(0,10);
ctx.lineTo(0,-135);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
timer();
setInterval(timer,1000);//每秒执行一次

</script>
</div>
</body>
</html>