js Canvas绘制圆形时钟效果
本文实例为大家分享了jsCanvas圆形时钟的具体实现代码，供大家参考，具体内容如下
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>CanvasClock</title>
<styletype="text/css">
div{
text-align:center;
margin-top:250px;
}
#clock{
border:1pxsolid#ccc;
}
</style>
</head>
<body>
<div>
<canvasid="clock"height="200px"width="200px"></canvas>
</div>
<scripttype="text/javascript"src="js/clock.js"></script>
</body>
</html>
js
vardom=document.getElementById('clock');
varcxt=dom.getContext("2d");
varwidth=cxt.canvas.width;
varheight=cxt.canvas.height;
varr=width/2;
functiondrawBackground(){
cxt.save();
cxt.translate(r,r);
cxt.beginPath();
cxt.lineWidth=10;
cxt.arc(0,0,r-5,0,2*Math.PI,false);
cxt.stroke();
cxt.font="18pxArial";
cxt.textAlign='center'
cxt.textBaseline='middle'
varhourNums=[3,4,5,6,7,8,9,10,11,12,1,2];
hourNums.forEach(function(number,i){
varrad=2*Math.PI/12*i;
varx=Math.cos(rad)*(r-30);
vary=Math.sin(rad)*(r-30);
cxt.fillText(number,x,y);
});
for(vari=0;i<60;i++){
varrad=2*Math.PI/60*i;
varx=Math.cos(rad)*(r-18);
vary=Math.sin(rad)*(r-18);
cxt.beginPath();
if(i%5===0){
cxt.fillStyle="#000"
cxt.arc(x,y,2,0,2*Math.PI,false);
}
else{
cxt.fillStyle="#ccc"
cxt.arc(x,y,2,0,2*Math.PI,false);
}
cxt.fill();
}
}
functiondrawHour(hour,minute){
cxt.save();
cxt.beginPath();
varrad=2*Math.PI/12*hour;
varmrad=2*Math.PI/12/60*minute
cxt.rotate(rad+mrad);
cxt.lineWidth=6;
cxt.lineCap='round'
cxt.moveTo(0,10);
cxt.lineTo(0,-r/2);
cxt.stroke();
cxt.restore();
}
functiondrawMinute(minute){
cxt.save();
cxt.beginPath();
varrad=2*Math.PI/60*minute;
cxt.rotate(rad);
cxt.lineWidth=3;
cxt.lineCap='round'
cxt.moveTo(0,10);
cxt.lineTo(0,-r+30);
cxt.stroke();
cxt.restore();
}
functiondrawSecond(second){
cxt.save();
cxt.beginPath();
cxt.fillStyle='#c14543'
varrad=2*Math.PI/60*second;
cxt.rotate(rad);
cxt.moveTo(-2,20);
cxt.lineTo(2,20);
cxt.lineTo(1,-r+18);
cxt.lineTo(-1,-r+18);
cxt.fill();
cxt.restore();
}
functiondrawDot(){
cxt.beginPath();
cxt.fillStyle='#fff'
cxt.arc(0,0,3,0,2*Math.PI,false);
cxt.fill();
}
functiondraw(){
cxt.clearRect(0,0,width,height);
varnow=newDate();
varhour=now.getHours();
varminute=now.getMinutes();
varsecond=now.getSeconds();
drawBackground();
drawHour(hour,minute);
drawMinute(minute);
drawSecond(second);
drawDot();
cxt.restore();
}
draw();
setInterval(draw,1000);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。