|
<!DOCTYPE html>
| |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Canvas Clock</title> | |
| <style type="text/css"> | |
| div{ | |
| text-align: center; | |
| margin-top: 250px; | |
| } | |
| #clock{ | |
| border: 1px solid #ccc; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div> | |
| <canvas id="clock" height="200px" width="200px"></canvas> | |
| </div> | |
| <script> | |
| var cc=document.getElementById("clock"); | |
| var cxt=cc.getContext("2d"); | |
| var r=100;//半径设置为100 | |
| var deg= 2*Math.PI/60;//秒针分针走一个格所用的角度 | |
| var deg2=2*Math.PI/12;//时针一个格子的角度 | |
| //表盘 | |
| function biaopan(){ | |
| cxt.beginPath(); | |
| cxt.lineWidth=1; | |
| cxt.strokeStyle="black"; | |
| cxt.arc(100,100,r,0,2*Math.PI,false); | |
| cxt.stroke(); | |
| for(var i=0;i<60;i++){ | |
| var x=r*Math.cos(deg*i);//三角函数计算每一个格子的位置 | |
| var y=r*Math.sin(deg*i); | |
| if (i%5 == 0){//画出小时的刻度 | |
| cxt.beginPath(); | |
| cxt.moveTo(100,100); | |
| cxt.strokeStyle="red";//这个全文通用的那种，所以在画小格子的时候一定要改回黑色，不改他不会自己回到默认的 | |
| cxt.lineTo(r+x,r+y); | |
| cxt.stroke(); | |
| } | |
| else{ | |
| cxt.beginPath(); | |
| cxt.moveTo(100,100); | |
| cxt.lineTo(r+x,r+y); | |
| cxt.strokeStyle="black";//！就是这里 | |
| cxt.stroke(); | |
| } | |
| } | |
| cxt.beginPath(); | |
| cxt.arc(100,100,r-10,0,2*Math.PI,false); | |
| cxt.fillStyle="white"; | |
| cxt.fill(); | |
| // 数字 | |
| cxt.beginPath(); | |
| cxt.font="14px Arial"; | |
| cxt.textAlign='center' | |
| cxt.textBaseline='middle' | |
| var hourNums=[3,4,5,6,7,8,9,10,11,12,1,2];//起笔是在水平方向，就是三点钟的方向所以再添加数字时从三开始 | |
| hourNums.forEach(function(number,i){//添加小时的数字 | |
| cxt.beginPath(); | |
| cxt.moveTo(100,100); | |
| var rad=2*Math.PI/12*i; | |
| var x=Math.cos(rad)*(r-15); | |
| var y=Math.sin(rad)*(r-15); | |
| cxt.fillStyle="black"; | |
| cxt.fillText(number,r+x,r+y); | |
| }); | |
| // 表芯 | |
| cxt.beginPath(); | |
| cxt.moveTo(100,100); | |
| cxt.arc(102,102,4,0,2*Math.PI,false); | |
| cxt.fillStyle="black"; | |
| cxt.fill();} | |
| //表针 | |
| function biaozhen(second,minute,hour){ | |
| var s=cc.getContext("2d"); | |
| var h=cc.getContext("2d"); | |
| var m=cc.getContext("2d"); | |
| //秒针 | |
| s.beginPath(); | |
| s.moveTo(100,100); | |
| s.arc(100,100,70,(second*360/60-90)*Math.PI/180,(second*360/60-90)*Math.PI/180); | |
| s.strokeStyle="red"; | |
| s.stroke(); | |
| //时针 | |
| h.beginPath(); | |
| h.moveTo(100,100); | |
| h.arc(100,100,50,(hour*360/12-90)*Math.PI/180,(hour*360/12-90)*Math.PI/180); | |
| h.strokeStyle="black"; | |
| h.stroke(); | |
| //分针 | |
| m.beginPath(); | |
| m.moveTo(100,100); | |
| m.arc(100,100,60,(minute*360/60-90)*Math.PI/180,(minute*360/60-90)*Math.PI/180); | |
| m.strokeStyle="green"; | |
| m.stroke(); | |
| } | |
| //动画 | |
| function draw(){ | |
| cxt.clearRect(0,0,200,200); | |
| var now=new Date(); | |
| var second=now.getSeconds(); | |
| var minute=now.getMinutes()+second/60;//为了不让分针嗖的一下子蹦一个格，要带上秒 | |
| var hour=now.getHours()+minute/60;//就是可以让时针也随着分针缓步前进 | |
| biaopan(); | |
| biaozhen(second,minute,hour); | |
| } | |
| setInterval(draw,1000); | |
| </script> | |
| </body> | |
</html> |
刚学canvas时做的，其实很简单，但是对原理掌握的不清楚，所以做的很麻烦，感觉就是一层又一层的往上叠加，之前看到一个利用save和restore做的，做的很美观，我这个就是为了练一下，就像表示小时的刻度线可以画的长一些，不过我比较懒就没弄，慢慢学吧，就当记录自己的代码了，这个是丑丑的效果图。