- 又一个HTML5时钟特效，圆形表盘+动画走动的指针，全部使得了Canvas和JavaScript技术结合实现，想学习HTML5编程的话，本时钟内有许多编程小技巧可以借鉴。比如表盘的设计、渐变色的添加、动画指针走动等，测试注意：要使用支持HTML5的浏览器，IE8不行哦，考虑火狐或Chrome。
-
<!doctype html><html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><head><SCRIPT LANGUAGE='JavaScript'>//屏蔽js错误function ResumeError() {return true;}window.onerror = ResumeError;</SCRIPT></head><body><h2>canvas 挂钟</h2><canvas id="clock" width="500" height="500">你的破<!--[if lte IE 10]>IE<![endif]-->浏览器不支持canvas标签，无法看到我们的激情小图片</canvas><script>var clock=document.getElementById('clock');var cxt=clock.getContext('2d');var now1 = new Date();//表的配色//var bp = '#FFFFFF';//表盘var bk = '#ff9900';//表框var sk = '#0066CC';//时刻度var fk = '#0066CC';//分刻度var sz = '#333399';//时针var fz = '#333399';//分针var mz = '#CCCC00';//秒针var mh = '#FF0033';//秒针后小圆点var mq = '#FF0033';//秒针钱小圆点function drawClock(){//清除画布cxt.clearRect(0,0,500,500);var now =new Date();var msec = now.getMilliseconds();var sec=now.getSeconds();var min=now.getMinutes();var hour=now.getHours();//小时必须获取浮点类型(小时+分数转化成的小时)hour=hour+min/60;//问题 19:23:30//将24小时进制转换为12小时hour=hour>12?hour-12:hour;//表盘(蓝色)//设置渐变色var bbp = cxt.createRadialGradient(250,250,0,250,250,250);bbp.addColorStop(0.4,'#fff');bbp.addColorStop(1,'#ffcc00');cxt.lineWidth=12;cxt.strokeStyle=bk;cxt.fillStyle = bbp;cxt.beginPath();cxt.arc(250,250,200,0,360,false);cxt.closePath();cxt.stroke();cxt.fill();//刻度//时刻度for(var i=0;i<12;i++){cxt.save();//设置时针的粗细cxt.lineWidth=7;//设置时针的颜色cxt.strokeStyle=sk;//先设置0,0点cxt.translate(250,250);//再设置旋转角度cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度cxt.beginPath();cxt.moveTo(0,-170);cxt.lineTo(0,-190);cxt.closePath();cxt.stroke();cxt.restore();}//分刻度for(var i=0;i<60;i++){cxt.save();//设置分刻度的粗细cxt.lineWidth=5;//设置颜色(使用时刻度的颜色)cxt.strokeStyle=fk;//设置或者重置画布的0，0点cxt.translate(250,250);//设置旋转角度cxt.rotate(i*6*Math.PI/180);//画分针刻度cxt.beginPath();cxt.moveTo(0,-180);cxt.lineTo(0,-190);cxt.closePath();cxt.stroke();cxt.restore();}//时针cxt.save();//设置时针风格cxt.lineWidth=7;//设置时针的颜色cxt.strokeStyle=sz;//设置异次元空间的0，0点cxt.translate(250,250);//设置旋转角度cxt.rotate(hour*30*Math.PI/180);cxt.beginPath();cxt.moveTo(0,-110);cxt.lineTo(0,10);cxt.closePath();cxt.stroke();cxt.restore();//分针cxt.save();//设置分针的风格cxt.lineWidth=5;cxt.strokeStyle=fz;//设置异次元空间分针画布的圆心cxt.translate(250,250);//设置旋转角度cxt.rotate(min*6*Math.PI/180);cxt.beginPath();cxt.moveTo(0,-140);cxt.lineTo(0,15);cxt.closePath();cxt.stroke();cxt.restore();//秒针cxt.save();//设置秒针的风格//颜色红色cxt.strokeStyle=mz;//粗细 3像素cxt.lineWidth=3;//重置0，0点cxt.translate(250,250);//设置旋转角度//cxt.rotate(sec + msec*0.006*Math.PI/180);cxt.rotate((sec+msec/1000)*6*Math.PI/180);//画图cxt.beginPath();cxt.moveTo(0,-170);cxt.lineTo(0,20);cxt.closePath();cxt.stroke();//画出时针、分针、秒针的交叉点、cxt.beginPath();cxt.arc(0,0,5,0,360,false);cxt.closePath();//设置填充样式cxt.fillStyle=mh;cxt.fill();//设置笔触样式(秒针已设置)cxt.stroke();//设置秒针前段的小圆点cxt.beginPath();cxt.arc(0,-150,5,0,360,false);cxt.closePath();//设置填充样式cxt.fillStyle=mq;cxt.fill();//设置笔触样式(秒针已设置)cxt.stroke();cxt.restore();}//使用setInterval(代码,毫秒时间) 让时钟动起来drawClock();setInterval(drawClock,50);</script></body></html>
标签：网站源码