使用canvas绘制超炫时钟

swmozowtfl · 发表于 2015-7-14 22:16:18

先上效果图：

登录/注册后可看大图

代码如下:
<!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/650) ;
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>

更多网页制作信息请查看：网页制作

亮凌庚 · 发表于 2015-7-17 22:45:56

本人在此留言均为网络上复制，用于检验本人电脑键盘录入、屏幕显示的机械、光电性能。并不代表本人局部或全部同意、支持或者反对楼主观点。

xiaoye · 发表于 2015-7-17 22:52:30

对于这种刚发的帖子，我总是毫不犹豫的顶了。如果火了就是个前排，可以混个脸熟，说不定谁好心就给粉了…稳赚不赔；如果沉了就感觉是我弄沉的，很有成就感，还能捞经验。

xiaoye · 发表于 2015-7-17 22:57:46

不为楼主的标题所吸引，也不是被贴子的内容所迷惑。

kwjvtwzx · 发表于 2015-7-17 22:58:03

看,刚说你眼神不好,你还就来劲了不是.

kwjvtwzx · 发表于 2015-7-17 23:07:08

我的我的忘记了呵呵

bqtklouu · 发表于 2015-7-31 15:14:46

还呕像.....

bqtklouu · 发表于 2015-7-31 15:22:12

估计你是没见识过~` 呵呵

effoggikeftor · 发表于 2015-7-31 15:25:17

嘿...反了反了,,,,

bqtklouu · 发表于 2015-7-31 15:40:23

哈哈~` 好久没有笑喽~

[网页制作] 使用canvas绘制超炫时钟

精彩评论9