先不说废话，没代码算个蛋。
一些地方注释都写得比较清楚，不过这只是部分，因为只有秒针，但是时针，分针的逻辑都是一致的。
代码中有些坐标不知道为什么较不准，看看就好
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>
原标题：HTML5 Canvas画数字时钟
关键词：HTML
我知道了 