HTML5 Canvas画数字时钟
先不说废话，没代码算个蛋。
一些地方注释都写得比较清楚，不过这只是部分，因为只有秒针，但是时针，分针的逻辑都是一致的。
代码中有些坐标不知道为什么较不准，看看就好
类似就是这样，没有经过美化。
1 <html> 2 <head> 3 <title></title> 4 </head> 5 <body> 6 <canvas id="clock1.0" width="600" height="300" style="border:1px solid"></canvas> 7 <script type="text/javascript"> 8 var canvas; 9 var ctx; 10 var width = 600; 11 var height = 300; 12 var c_r = Math.min(width, height) / 3; 13 var pattern; 14 var j = new Date().getSeconds();//获取当前时间的秒数 15 function init() { 16 canvas = document.getElementById('clock1.0'); 17 ctx = canvas.getContext('2d');//你懂得，必须得写的 18 ctx.fillStyle = "white"; 19 ctx.fillRect(0, 0, width, height); 20 waiquan(); 21 neiquan();//其实圆环的产生是黑色的外圈＋背景色的内圈 22 miaoshu();//内圈中写个秒数，去掉后也可以做圆环进度条 23 } 24 var image = new Image(); 25 image.onload = function (e) { 26 pattern = ctx.createPattern(image, 'repeat'); 27 }//加载个图片背景图 28 function miaoshu() { 29 30 var miao = new Date().getSeconds(); 31 if (miao < 10) { 32 miao = "0" + miao; 33 }//秒数10以下，显示的是单位数，不美观 34 ctx.font = '80px arial'; 35 image.src = 'redball.png'; 36 ctx.fillStyle = pattern;//这个背景图是用来做数字文字背景，其实完全没必要的 37 ctx.fillText(miao, width / 2-45, height / 2+30);//图片填充的文字 38 ctx.strokeText(miao, width / 2 - 45, height / 2 + 30);//描边文字 39 } 40 function neiquan() {//内圈就是一个园，背景色的圆 41 ctx.beginPath(); 42 ctx.moveTo(width / 2, height / 2); 43 ctx.fillStyle = "white"; 44 ctx.arc(width / 2, height / 2, c_r *0.81, 0, 2 * Math.PI, false);//自己控制内圈半径 45 ctx.fill(); 46 } 47 function waiquan() {//外圈就需要考虑阴影面积了 48 if (j < 60) { 49 var hudu = 2 * Math.PI / 360 * (j * 6);//采用弧度机制，360度分为60格，每格6度，360度为2PI，所以j最大值为59 50 ctx.beginPath(); 51 ctx.moveTo(width / 2, height / 2);//这里添加moveTo，其实是定义Fill()时的起始点，这里就是从圆心 52 //不添加上面这句，那么你画出来的阴影就不是扇形，是。类似切冬瓜。一圈一圈。。 53 ctx.arc(width / 2, height / 2, c_r, 3 / 2 * Math.PI, 3 / 2 * Math.PI + hudu, false);//这里就注意arc()的第四个参数，是弧度的起始位置，一般以前看到的都是0，这里要从3/2PI开始 54 //var grd = ctx.createLinearGradient(width / 2, height / 2, c_r/2, 3 / 2 * Math.PI, width / 2, height / 2, c_r, 3 / 2 * Math.PI); //本来想搞高渐变的，目前不成功 55 //grd.addColorStop(0, "#000000"); 56 //grd.addColorStop(1, "#ffff00"); 57 //ctx.fillStyle = grd; 58 ctx.fillStyle = "grey"; 59 ctx.fill(); 60 j++ 61 } 62 else { 63 j = 1;//这里可扩展到分针，j=1表示秒针重置，这时分针+1 64 } 65 } 66 67 function clean() { 68 ctx.fillStyle = "white"; 69 ctx.fillRect(0, 0, width, height);//以背景色，清除画布 70 } 71 72 setInterval(function () {//这里要注意的是清除的步骤，不然效果会很差 73 //先清空画布，把之前状态的清空，外圈，因为外圈黑色，再画内圈，把外圈中心盖掉，再画时间 74 clean(); 75 waiquan(); 76 neiquan(); 77 miaoshu(); 78 79 }, 1000)//1000ms，走的快的钟就不是钟了 80 window.onload("load", init(), true);//init作为初始加载函数 81 </script> 82 </body> 83 </html>
