HTML5 Canvas画数字时钟

先不说废话，没代码算个蛋。

一些地方注释都写得比较清楚，不过这只是部分，因为只有秒针，但是时针，分针的逻辑都是一致的。

代码中有些坐标不知道为什么较不准，看看就好

aaarticlea/png;base64,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" alt="" />类似就是这样，没有经过美化。

 <html>
 <head>
     <title></title>
 </head>
 <body>
     <canvas id="clock1.0" width="600" height="300" style="border:1px solid"></canvas>
     <script type="text/javascript">
         var canvas;
         var ctx;
         var width = 600;
         var height = 300;
         var c_r = Math.min(width, height) / 3;
         var pattern;
         var j = new Date().getSeconds();//获取当前时间的秒数
         function init() {
             canvas = document.getElementById('clock1.0');
             ctx = canvas.getContext('2d');//你懂得，必须得写的
             ctx.fillStyle = "white";
             ctx.fillRect(0, 0, width, height);
             waiquan();
             neiquan();//其实圆环的产生是黑色的外圈＋背景色的内圈
             miaoshu();//内圈中写个秒数，去掉后也可以做圆环进度条
         }
         var image = new Image();
         image.onload = function (e) {
             pattern = ctx.createPattern(image, 'repeat');
         }//加载个图片背景图
         function miaoshu() {

             var miao = new Date().getSeconds();
             if (miao < 10) {
                 miao = "0" + miao;
             }//秒数10以下，显示的是单位数，不美观
             ctx.font = '80px arial';
             image.src = 'redball.png';
             ctx.fillStyle = pattern;//这个背景图是用来做数字文字背景，其实完全没必要的
             ctx.fillText(miao, width / 2-45, height / 2+30);//图片填充的文字
             ctx.strokeText(miao, width / 2 - 45, height / 2 + 30);//描边文字
         }
         function neiquan() {//内圈就是一个园，背景色的圆
                 ctx.beginPath();
                 ctx.moveTo(width / 2, height / 2);
                 ctx.fillStyle = "white";
                 ctx.arc(width / 2, height / 2, c_r *0.81, 0, 2 * Math.PI, false);//自己控制内圈半径
                 ctx.fill();
         }
         function waiquan() {//外圈就需要考虑阴影面积了
             if (j < 60) {
                 var hudu = 2 * Math.PI / 360 * (j * 6);//采用弧度机制，360度分为60格，每格6度，360度为2PI，所以j最大值为59
                 ctx.beginPath();
                 ctx.moveTo(width / 2, height / 2);//这里添加moveTo，其实是定义Fill()时的起始点，这里就是从圆心
                 //不添加上面这句，那么你画出来的阴影就不是扇形，是。类似切冬瓜。一圈一圈。。
                 ctx.arc(width / 2, height / 2, c_r, 3 / 2 * Math.PI, 3 / 2 * Math.PI + hudu, false);//这里就注意arc()的第四个参数，是弧度的起始位置，一般以前看到的都是0，这里要从3/2PI开始
                 //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); //本来想搞高渐变的，目前不成功
                 //grd.addColorStop(0, "#000000");
                 //grd.addColorStop(1, "#ffff00");
                 //ctx.fillStyle = grd;
                 ctx.fillStyle = "grey";
                 ctx.fill();
                 j++
             }
             else {
                 j = 1;//这里可扩展到分针，j=1表示秒针重置，这时分针+1
             }
         }

         function clean() {
             ctx.fillStyle = "white";
             ctx.fillRect(0, 0, width, height);//以背景色，清除画布
         }

         setInterval(function () {//这里要注意的是清除的步骤，不然效果会很差
             //先清空画布，把之前状态的清空，外圈，因为外圈黑色，再画内圈，把外圈中心盖掉，再画时间
             clean();
             waiquan();
             neiquan();
             miaoshu();

         }, 1000)//1000ms，走的快的钟就不是钟了
         window.onload("load", init(), true);//init作为初始加载函数
     </script>
 </body>
 </html>