使用canvas绘制超炫时钟

先上效果图：

复制代码代码如下:
!DOCTYPE htML>
html>
head>
meta charset="utf-8">
tITle> canvas钟表/title>
meta name="Keywords" content="">
meta name="author" content="@my_PRogrammer">
style type="text/css">
body{ margin:0; }
/style>
/head>
body onload="run()">
canvas id="canvas" width=400 height=400 style="border: 1px #ccc solid; "> 如果你看到这段文字，说明你的浏览器弱爆了！/canvas>
script>
window.onload=draw;
function draw() {
VAR canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.save(); ///////////////////////////////////保存
context.translate(200,200);
var deg=2*Math.PI/12;
//////////////////////////////////////////////////表盘
context.save();
context.beginPath();
for(var i=0; i13; i++){
var x=Math.sin(i*deg);
var y=-Math.cos(i*deg);
context.lineto(x*150,y*150);
}
var c=context.createRadialGradient(0,0,0,0,0,130);
c.addColorStop(0,"#22f");
c.addColorStop(1,"#0ef")
context.fillStyle=c;
context.fill();
context.closePath();
context.reStore();
//////////////////////////////////////////////////数字
context.save();
context.beginPath();
for(var i=1; i13; i++){
var x1=Math.sin(i*deg);
var y1=-Math.cos(i*deg);
context.fillStyle="#fff";
context.font="bold 20px Calibri";
context.textAlign='center';
context.textBaseline='middle';
context.fillText(i,x1*120,y1*120);
}
context.closePath();
context.restore();
//////////////////////////////////////////////////大刻度
context.save();
context.beginPath();
for(var i=0; i12; i++){
var x2=Math.sin(i*deg);
var y2=-Math.cos(i*deg);
context.moveTo(x2*148,y2*148);
context.lineTo(x2*135,y2*135);
}
context.strokeStyle='#fff';
context.lineWidth=4;
context.stroke();
context.closePath();
context.restore();
//////////////////////////////////////////////////小刻度
context.save();
var deg1=2*Math.PI/60;
context.beginPath();
for(var i=0; i60; i++){
var x2=Math.sin(i*deg1);
var y2=-Math.cos(i*deg1);
context.moveTo(x2*146,y2*146);
context.lineTo(x2*140,y2*140);
}
context.strokeStyle='#fff';
context.lineWidth=2;
context.stroke();
context.closePath();
context.restore();
///////////////////////////////////////////////////文字
context.save();
context.strokeStyle="#fff";
context.font=' 34px sans-serif';
context.textAlign='center';
context.textBaseline='middle';
context.strokeText('canvas',0,65);
context.restore();
/////////////////////////////////////////////////new Date
var time=new Date();
var h=(time.getHours()%12)*2*Math.PI/12;
var m=time.getMinutes()*2*Math.PI/60;
var s=time.getSeconds()*2*Math.PI/60; /p> p> ////////////////////////////////////////////////时针
context.save();
context.rotate( h + m/12 + s/720) ;
context.beginPath();
context.moveTo(0,6);
context.lineTo(0,-85);
context.strokeStyle="#fff";
context.lineWidth=6;
context.stroke();
context.closePath();
context.restore();
//////////////////////////////////////////////分针
context.save();
context.rotate( m+s/60 ) ;
context.beginPath();
context.moveTo(0,8);
context.lineTo(0,-105);
context.strokeStyle="#fff";
context.lineWidth=4;
context.stroke();
context.closePath();
context.restore();
/////////////////////////////////////////////秒针
context.save();
context.rotate( s ) ;
context.beginPath();
context.moveTo(0,10);
context.lineTo(0,-120);
context.strokeStyle="#fff";
context.lineWidth=2;
context.stroke();
context.closePath();
context.restore();
context.restore(); /////////////////////////////栈出
setTimeout(draw, 1000); /////////////////////////////计时器/p> p> } /p> p> /script>
/body>
/html>

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！