注意：Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。Internet Explorer 8 以及更早的版本不支持 <canvas> 元素
效果图如下：
实现代码：（代码中有相应注释介绍，比较好懂，如果实在有不懂得地方，欢迎私信，或者参考W3C文档）
1 <!DOCTYPE html> 2 <html> 3<head> 4 <meta charset="utf-8" /> 5 <title>时钟</title> 6 <style type="text/css"> 7 div{ 8 text-align: center; 9 } 10 </style> 11</head> 12<body> 13 <!--该div作用：让时钟在屏幕中间--> 14 <div> 15 <canvas width="800px" height="800px" id="myCanvas"></canvas> 16 </div> 1718 <script> 19 var myCanvas = document.getElementById("myCanvas"); 20 var ctx = myCanvas.getContext("2d"); 21 //获取画布宽和高 22 var w = myCanvas.width; 23 var h = myCanvas.height; 24 25 26 //时钟表盘大小 27 var r = w/2; 28 29 30 //时钟表盘上的时间及刻度 31 function fun(){ 32 ctx.save();//保存当前环境的状态 33 //填充的渐变色 34 var r1 = Math.floor(Math.random()*256); 35 var g1 = Math.floor(Math.random()*256); 36 var b1 = Math.floor(Math.random()*256); 37 var grd=ctx.createLinearGradient(0,0,0,r); 38 grd.addColorStop(0,"rgb("+r1+","+g1+","+b1+")"); 39 grd.addColorStop(0.5,"rgb("+b1+","+g1+","+r1+")"); 40 grd.addColorStop(1,"rgb("+g1+","+b1+","+r1+")"); 41 42 //重新映射画布上的 (0,0) 位置，即改变画布原点位置 43 ctx.translate(r,r); 44 ctx.beginPath(); 45 ctx.lineWidth = 10; 46 ctx.arc(0,0,r-12,0,2*Math.PI,false); 47 ctx.strokeStyle = grd; 48 ctx.stroke(); 49 ctx.closePath(); 50 //设置时间刻度字体大小，对其方式，基线 51 ctx.font = "22px Arial"; 52 ctx.textAlign = "center"; 53 ctx.textBaseline = "middle" 54 //定义一个数组用于保存时间刻度 55 var num = [3,4,5,6,7,8,9,10,11,12,1,2]; 56 //循环将时间显示在表盘中 57 for(var i = 0;i < num.length; i++){ 58 //定义时间刻度在表盘中相应弧度，根据弧度利用正弦余弦公式求出该刻度横坐标和纵坐标 59 //数字3为数组第一个数字刻度是因为，绘制圆时（0弧度）是从3对应刻度位置开始的 60 var rad = Math.PI*2/12*i; 61 var x = Math.cos(rad)*(r-60); 62 var y = Math.sin(rad)*(r-60); 63 ctx.beginPath(); 64 //填充文本 65 ctx.fillText(num[i],x,y); 66 ctx.fillStyle = grd; 67 ctx.closePath(); 68 } 69 70 for(var i = 0;i < 60; i++){ 71 var rad = Math.PI*2/60*i; 72 var x = Math.cos(rad)*(r-40); 73 var y = Math.sin(rad)*(r-40); 74 ctx.beginPath(); 75 ctx.arc(x,y,6,0,2*Math.PI,false); 76 //时间刻度点取余，与现实表盘相对应 77 if(i%5==0){ 78ctx.fillStyle = grd; 79ctx.arc(x,y,10,0,2*Math.PI,false); 80 }else{ 81ctx.fillStyle = grd; 82 } 83 ctx.fill() 84 ctx.closePath(); 85 } 86 } 87 88 //绘制时针 89 function drawHour(hour,minute){ 90 ctx.save(); 91 //填充的渐变色 92 var r1 = Math.floor(Math.random()*256); 93 var g1 = Math.floor(Math.random()*256); 94 var b1 = Math.floor(Math.random()*256); 95 var grd=ctx.createLinearGradient(0,0,0,r); 96 grd.addColorStop(0,"rgb("+g1+","+r1+","+b1+")"); 97 grd.addColorStop(0.5,"rgb("+r1+","+b1+","+g1+")"); 98 grd.addColorStop(1,"rgb("+r1+","+g1+","+r1+")"); 99 100 //设置时针旋转角度101 var rad = Math.PI*2/12*hour;102 //分针旋转角度会对时针起影响，将对应分针旋转角度加上103 var rad_min = Math.PI*2/12/60*minute104 //旋转105 ctx.rotate(rad+rad_min);106 ctx.lineWidth = 8;107 ctx.beginPath();108 ctx.moveTo(0,10);109 ctx.lineTo(0,-r/2)110 ctx.closePath();111 ctx.strokeStyle = grd;112 ctx.stroke();113 ctx.restore();//返回之前保存过的路径状态和属性114 }115 116 //绘制分针,绘制过程和时针相似117 function drawMinute(minute,second){118 ctx.save();119 120 var rad = Math.PI*2/60*minute;121 var rad_seco = Math.PI*2/3600*second122 ctx.rotate(rad + rad_seco);123 ctx.lineWidth = 6;124 ctx.beginPath();125 ctx.moveTo(0,20);126 ctx.lineTo(0,-r+150)127 ctx.lineCap = "round";128 ctx.stroke();129 ctx.restore();130 }131 132 //绘制秒针133 function drawScond(second){134 ctx.save();135 //填充的渐变色136 var r1 = Math.floor(Math.random()*256);137 var g1 = Math.floor(Math.random()*256);138 var b1 = Math.floor(Math.random()*256);139 var grd=ctx.createLinearGradient(0,0,0,r);140 grd.addColorStop(0,"rgb("+r1+","+g1+","+b1+")");141 grd.addColorStop(0.5,"rgb("+b1+","+g1+","+r1+")");142 grd.addColorStop(1,"rgb("+g1+","+b1+","+r1+")");143 144 var rad = Math.PI*2/60*second;145 ctx.rotate(rad);146 ctx.beginPath();147 ctx.moveTo(-2,30);148 ctx.lineTo(2,10)149 ctx.lineTo(1,-r+50);150 ctx.lineTo(-1,-r+50);151 ctx.fillStyle = grd;152 ctx.fill();153 //绘制秒针中间点缀154 ctx.beginPath();155 ctx.strokeStyle = grd;156 ctx.arc(0,-r/2,3,0,2*Math.PI,false);157 ctx.stroke();158 ctx.arc(0,-r/2,2,0,2*Math.PI,false);159 ctx.fillStyle = grd;160 ctx.fill()161 ctx.restore();162 }163 164 //绘制固定时针分针秒针的中心点165 function drawDot(){166 ctx.beginPath();167 ctx.fillStyle = "white";168 ctx.arc(0,0,4,0,2*Math.PI,false);169 ctx.closePath();170 ctx.fill();171 }172 173 //获取系统当前时间，调用函数，传参数174 function drawClock(){175 ctx.clearRect(0,0,w,h);176 var now = new Date();177 var hour = now.getHours();178 var minute = now.getMinutes();179 var second = now.getSeconds();180 fun();181 drawHour(hour,minute);182 drawMinute(minute,second);183 drawScond(second);184 drawDot();185 ctx.restore();186 }187 188 //调用函数显示表盘189 drawClock();190 //设置定时器，跟随系统让时钟动起来191 setInterval(drawClock,1000);192 </script>193</body>194 </html>
