html5中如何使用canvas实现圆形时钟

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML CLOCK</title> </head> <body> <canvas width="500" height="500" id="clock"> 你的浏览器不支持canvas标签，时针显示不出来哦！ </canvas> <script type="text/javascript"> //画布背景颜色 var clockBackGroundColor = "#ABCDEF"; //时针颜色 var hourPointColor = "#000"; //时针粗细 var hourPointWidth = 7; //时针长度 var hourPointLength = 100; //分针颜色 var minPointColor = "#000"; //分针粗细 var minPointWidth = 5; //分针长度 var minPointLength = 150; //秒针颜色 var secPointColor = "#F00"; //秒针粗细 var secPointWidth = 3; //秒针长度 var secPointLength = 170; //表盘颜色 var clockPanelColor = "#ABCDEF"; //表盘刻度颜色 var scaleColor = "#000"; //表盘大刻度宽度 3 6 9 12 var scaleBigWidth = 9; //表盘大刻度的长度 var scaleBigLength = 15; //表盘小刻度的宽度 var scaleSmallWidth = 5; //表盘小刻度的长度 var scaleSmallLength = 10; //圆心颜色 var centerColor = 'red'; //时钟画布 var clock = document.getElementById('clock'); clock.style.background = clockBackGroundColor; //时针画布的作图环境（画板） var panel = clock.getContext('2d'); //画线 /** *画线段 * * */ function drowLine(p,width,color,startX,startY,endX,endY,ran,cX,cY){ //保存传入的画板，相当于每次作画新开一个图层 p.save(); //设置画笔宽度 p.lineWidth = width; //设置画笔颜色 p.strokeStyle = color; //新开启作图路径，避免和之前画板上的内容产生干扰 p.beginPath(); p.translate(cX,cY); //旋转 p.rotate(ran); //移动画笔到开始位置 p.moveTo(startX,startY); //移动画笔到结束位置 p.lineTo(endX,endY); //画线操作 p.stroke(); //关闭作图路径，避免和之后在画板上绘制的内容产生干扰 p.closePath(); //在传入的画板对象上覆盖图层 p.restore(); } /** *画水平线 */ function drowHorizontalLine(p,width,length,color,startX,startY,ran,cX,cY){ drowLine(p,width,color,startX,startY,startX+length,startY,ran,cX,cY); } /** *画圈圈 */ function drowCircle(p,width,color,centreX,centreY,r){ p.save(); //设置画笔宽度 p.lineWidth = width; //设置画笔颜色 p.strokeStyle = color; //新开启作图路径，避免和之前画板上的内容产生干扰 p.beginPath(); //画圈圈 p.arc(centreX,centreY,r,0,360,false); //画线操作 p.stroke(); //关闭作图路径，避免和之后在画板上绘制的内容产生干扰 p.closePath(); //在传入的画板对象上覆盖图层 p.restore(); } function drowPoint(p,width,color,centreX,centreY,r){ p.save(); //设置画笔宽度 p.lineWidth = width; //设置画笔颜色 p.fillStyle = color; //新开启作图路径，避免和之前画板上的内容产生干扰 p.beginPath(); //画圈圈 p.arc(centreX,centreY,r,0,360,false); //画线操作 p.fill(); //关闭作图路径，避免和之后在画板上绘制的内容产生干扰 p.closePath(); //在传入的画板对象上覆盖图层 p.restore(); } function drowScales(p){ //画小刻度 for(var i = 0;i < 60;i++){ drowHorizontalLine(p,scaleSmallWidth,scaleSmallLength,scaleColor,195-scaleSmallLength,0,i*6*Math.PI/180,250,250); } //画大刻度 for(var i = 0;i < 12;i++){ drowHorizontalLine(p,i%3==0?scaleBigWidth*1.2:scaleBigWidth,i%3==0?scaleBigLength*1.2:scaleBigLength,scaleColor,195-scaleBigLength,0,i*30*Math.PI/180,250,250); //可以添加数字刻度 } } function drowHourPoint(p,hour){ drowHorizontalLine(p,hourPointWidth,hourPointLength,hourPointColor,-10,0,(hour-3)*30*Math.PI/180,250,250); } function drowMinPoint(p,min){ drowHorizontalLine(p,minPointWidth,minPointLength,minPointColor,-15,0,(min-15)*6*Math.PI/180,250,250); } function drowSecPoint(p,sec){ drowHorizontalLine(p,secPointWidth,secPointLength,secPointColor,-15,0,(sec-15)*6*Math.PI/180,250,250); } function drowClock(){ panel.clearRect(0,0,500,500); panel.fillText("",10,20); panel.fillText("<a href="http://www.jb51.net",10,40">http://www.jb51.net",10,40</a>); var date = new Date(); var sec = date.getSeconds(); var min = date.getMinutes(); var hour = date.getHours() + min/60; drowCircle(panel,7,'blue',250,250,200); drowScales(panel); drowHourPoint(panel,hour); drowMinPoint(panel,min); drowSecPoint(panel,sec); drowPoint(panel,1,centerColor,250,250,7); //drowHorizontalLine(panel,10,10,'red',-5,0,0,250,250); } //drowHorizontalLine(panel,7,30,'#F00',0,0,Math.PI,250,250); drowClock(); setInterval(drowClock,1000); function save(){ var image = clock.toDataURL("image/png").replace("image/png", "image/octet-stream"); location.href=image; } </script> </body> </html>

相关阅读