canvas绘制表盘时钟
话不多说，请看代码：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>canvas绘制表盘</title>
</head>
<body>
<canvasid='box'width="500"height="500">
您的浏览器不支持canvas
</canvas>
<script>
varbox=document.getElementById('box');
varcxt=box.getContext('2d');
//时钟动起来
vartimer=null;
functionclock(){
vardate=newDate();
varh=date.getHours();
h=h+h/60;
h=h>12?h-12:h;
varm=date.getMinutes();
vars=date.getSeconds();
//清画布
cxt.clearRect(0,0,500,500);
//画表盘
cxt.strokeStyle='#f0f';
cxt.lineWidth=6;
cxt.beginPath();
cxt.arc(250,250,100,0,2*Math.PI);
cxt.stroke();
//画时钟刻度
for(vari=0;i<12;i++){
cxt.save();
cxt.translate(250,250);
cxt.rotate(30*i*Math.PI/180);
cxt.lineWidth=3;
cxt.beginPath();
cxt.moveTo(0,-80);
cxt.lineTo(0,-92);
cxt.stroke();
cxt.restore();
}
//画分钟刻度
for(vari=0;i<60;i++){
cxt.save();
cxt.translate(250,250);
cxt.rotate(6*i*Math.PI/180);
cxt.lineWidth=2;
cxt.beginPath();
cxt.moveTo(0,-86);
cxt.lineTo(0,-92);
cxt.stroke();
cxt.restore();
}
//画时针
cxt.save();
cxt.lineWidth=5;
cxt.translate(250,250);
cxt.rotate(h*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,6);
cxt.lineTo(0,-40);
cxt.stroke();
cxt.restore();
//画分针
cxt.save();
cxt.lineWidth=3;
cxt.translate(250,250);
cxt.rotate(m*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,8);
cxt.lineTo(0,-60);
cxt.stroke();
cxt.restore();
//画秒针
cxt.save();
cxt.lineWidth=1;
cxt.translate(250,250);
cxt.rotate(s*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,10);
cxt.lineTo(0,-75);
cxt.stroke();
cxt.restore();
//画中心的小圆固定三根针
cxt.save();
cxt.beginPath();
cxt.fillStyle='#0f0';
cxt.lineWidth=2;
cxt.translate(250,250);
cxt.arc(0,0,2,0,360,false);
cxt.stroke();
cxt.fill();
cxt.restore();
//画秒针上的园
cxt.save();
cxt.fillStyle='#f00';
cxt.lineWidth=2;
cxt.translate(250,250);
cxt.rotate(s*6*Math.PI/180);
cxt.beginPath();
cxt.arc(0,-60,2,0,360,false);
cxt.stroke();
cxt.fill();
cxt.restore();
}
clock();
timer=setInterval(clock,1000);
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！