你的位置:首页 > 网页设计

[网页设计]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最大值为5950         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表示秒针重置,这时分针+164       }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>