canvas中画布时钟的简单事例
这是以前自己练习写的一个画布时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
canvas{
margin: 20px 400px 0;
}
</style>
</head>
<body>
<canvas width="500px" height="500px"></canvas>
<script>
var can=document.getElementsByTagName("canvas")[0];
var x=can.getContext("2d");
function clock(){
//每次执行代码清楚一次画布
x.clearRect(0,0,500,500);
//画一个蓝色实心圆
x.beginPath();
x.fillStyle="blue";
x.arc(250,250,250,Math.PI*0/180,Math.PI*360/180);
x.fill();
x.closePath();
//再来一个白色填充圆，半径小于上边的蓝色填充圆，这样就会出现一个蓝色的圆环
x.beginPath();
x.fillStyle="#ffffff";
x.arc(250,250,230,Math.PI*0/180,Math.PI*360/180);
x.fill();
x.closePath();
//分钟刻度，通过循环画出60根分钟刻度，360/6 得出每个得间隔
for(var i=0;i<60;i++){
x.save(); //保存环境变量
x.beginPath();
x.lineWidth=2;
x.translate(250,250);
x.rotate(i*6*Math.PI/180); //每个刻度间隔是6° ，所以i*6 在进行旋转就画出了所有刻度
x.moveTo(0,220);
x.lineTo(0,230);
x.stroke();
x.closePath();
x.restore(); //返回环境变量
}
//时钟刻度，时钟刻度只有12个所以，360/12 每个之间的间隔是30°，原理和分钟刻度相同当然你还可以循环更多，比如刻度换为数字
for(var a=0;a<12;a++){
x.save();
x.beginPath();
x.lineWidth=4;
x.translate(250,250);
x.rotate(a*30*Math.PI/180);
x.moveTo(0,215);
x.lineTo(0,230);
x.stroke();
x.closePath();
x.restore();
}
//获取当前的本地时间，并分别获取，时，分，秒，时和分都要精确到小数点后
var time=new Date();
var seconds=time.getSeconds();
var minutes=time.getMinutes()+seconds/60;
var hours=time.getHours()+minutes/60;
//当大于12的时候也就是要进入13点了 也就是1点 所以要减去12
if(hours>12){
hours=hours-12
};
//表盘上显示本地时间，如2017/06/14 下午 20：23
x.beginPath()
x.font="20px 黑体"
x.strokeText(time.toLocaleString(),150,200)
x.closePath();
//时
x.save();
x.translate(250,250)
x.lineWidth=4;
x.beginPath();
x.rotate(hours*30*Math.PI/180);//画好时针后当前的小时*30就是应该旋转的°数。
x.moveTo(0,10);
x.lineTo(0,-180);
x.stroke();
x.closePath();
x.restore();
//分
x.save();
x.beginPath();
x.translate(250,250)
x.lineWidth=3;
x.rotate(minutes*6*Math.PI/180); //分针同理
x.moveTo(0,10);
x.lineTo(0,-200)
x.stroke();
x.closePath();
x.restore();
//秒
x.save();
x.beginPath();
x.translate(250,250);
x.lineWidth=2;
x.rotate(seconds*6*Math.PI/180);//秒针也一样
x.moveTo(0,10);
x.lineTo(0,-210);
x.stroke();
x.closePath();
x.restore();
//秒针上的小圆点
x.save();
x.beginPath();
x.translate(250,250);
x.rotate(seconds*6*Math.PI/180);//让秒针小圆点随秒针位置，其实和秒针相同
x.fillStyle="blue";
x.arc(0,-170,4,0,Math.PI*360/180);
x.fill();
x.closePath();
x.restore();
//中心蓝色小圆点
x.beginPath();
x.fillStyle="blue"
x.arc(250,250,6,0,Math.PI*360/180);
x.fill();
x.closePath();
//中心红色小圆点
x.beginPath();
x.fillStyle="red"
x.arc(250,250,3,0,Math.PI*360/180);
x.fill();
x.closePath();
}
setInterval(clock,1000); //隔一秒运行一下这方法，先会清空掉画布然后重新画这样每秒时间都在动了。
</script>
</body>
</html>
效果
以上就是canvas中画布时钟的简单事例的详细内容，更多请关注其它相关文章！