首页 > 文章 > web前端 > HTML5实战-canvas绘制钟表的示例代码分享

HTML5实战-canvas绘制钟表的示例代码分享

黄舟原创: 2017-03-21 16:02:481431浏览

　　用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(&#39;canvas&#39;);
var context=canvas.getContext(&#39;2d&#39;);
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=&#39;center&#39;;
context.textBaseline=&#39;middle&#39;;
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=&#39;#fff&#39;;
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=&#39;#fff&#39;;
context.lineWidth=2;
context.stroke();
context.closePath();    
context.restore();    
///////////////////////////////////////////////////文字
context.save();
context.strokeStyle="#fff";
context.font=&#39; 34px sans-serif&#39;;
context.textAlign=&#39;center&#39;;
context.textBaseline=&#39;middle&#39;;
context.strokeText(&#39;canvas&#39;,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;

////////////////////////////////////////////////时针
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);/////////////////////////////计时器

}

</script>
</body>
</html>

以上是HTML5实战-canvas绘制钟表的示例代码分享的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：HTML5开发手机应用-详细介绍viewport的作用（图文）下一篇：HTML5 canvas画布的宽高为什么写在<canvas>标签里的详细介绍

查看更多