使用canvas绘制超炫时钟
程序员文章站
2023-12-04 10:12:22
这篇文章主要介绍了使用canvas绘制超炫时钟的方法及代码，非常的漂亮，这里推荐给大家... 14-12-17...
先上效果图：
复制代码
代码如下:<!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;i<13;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;i<13;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;i<12;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;i<60;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>