Demo : Demo
Demo截图：
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ margin:0;padding:0; } 8 body,html{width:100%;height:100%; overflow:hidden; min-width: 800px;min-height:800px;} 9 canvas{ background-color: #fff; padding:0;} 10 </style> 11 <script> 12 window.onload = function(){ 13 14 var oCanvas = document.getElementById('canvas'); 15 var oCtx = oCanvas.getContext('2d'); 16 var winWidth = document.body.clientWidth; 17 var winHeight = document.body.clientHeight; 18 var oBody = document.getElementsByTagName('body')[0]; 19 var propX = propY = 0; 20 21 var timer = null; 22 23 var X = 300; 24 var Y = 300; 25 26 27 oCanvas.setAttribute('width',winWidth); 28 oCanvas.setAttribute('height',winHeight); 29 30 setTime(); 31 timer = setInterval(setTime,1000); 32 33 //设置时间方法; 34 function setTime(){ 35 winWidth = document.body.clientWidth; 36 winHeight = document.body.clientHeight; 37 38 var myDate = new Date(), 39 seconds = myDate.getSeconds(), 40 minutes = myDate.getMinutes() + seconds/60, 41 hours = myDate.getHours() + minutes/60; 42 43 oCtx.clearRect(0,0,winWidth,winHeight); 44 45 //画底层3分针小刻度; 46 oCtx.save(); 47 oCtx.beginPath(); 48 for( var i=0,len=60;i<=len;i++ ){ 49 50 oCtx.arc(X,Y,200,0,Math.PI/180*i*6,false); 51 oCtx.lineTo(X,Y); 52 oCtx.stroke(); 53 oCtx.strokeStyle = '#000'; 54 oCtx.lineWidth = 2; 55 56 } 57 oCtx.closePath(); 58 oCtx.restore(); 59 60 //画盖住的底层的白圆; 61 oCtx.save(); 62 oCtx.beginPath(); 63 oCtx.arc(X,Y,190,0,2*Math.PI); 64 oCtx.fillStyle="#fff"; 65 oCtx.fill(); 66 oCtx.closePath(); 67 oCtx.restore(); 68 69 oCtx.save(); 70 oCtx.beginPath(); 71 for( var i=0,len=12;i<=len;i++ ){ 72 73 oCtx.arc(X,Y,200,0,Math.PI/180*i*30,false); 74 oCtx.lineTo(X,Y); 75 oCtx.stroke(); 76 oCtx.strokeStyle = '#000'; 77 oCtx.lineWidth = 4; 78 79 } 80 oCtx.closePath(); 81 oCtx.restore(); 82 83 //画底层时针的大刻度; 84 oCtx.save(); 85 oCtx.beginPath(); 86 oCtx.arc(X,Y,183,0,2*Math.PI); 87 oCtx.fillStyle="#fff"; 88 oCtx.fill(); 89 oCtx.closePath(); 90 oCtx.restore(); 91 92 //画盖住的底层的白圆; 93 oCtx.save(); 94 oCtx.arc(X,Y,183,0,2*Math.PI); 95 oCtx.fillStyle="#fff"; 96 oCtx.fill(); 97 oCtx.restore(); 98 99 //填充数字; 100 oCtx.save(); 101 var r = 160; 102 for( var i=1,len=12;i<=12;i++ ){ 103 oCtx.font = "40px Microsoft yahei"; 104 oCtx.textAlign='center'; 105 oCtx.textBaseline='middle'; 106 var x = Math.sin( i*360/12*Math.PI/180 )*r + X; 107 var y = -Math.cos( i*360/12*Math.PI/180 )*r + Y; 108 oCtx.fillText(i,x,y,40); 109 } 110 oCtx.restore(); 111 112 //画时针; 113 oCtx.save(); 114 oCtx.lineCap="round"; 115 oCtx.lineWidth = 8; 116 oCtx.strokeStyle = "#000" ; 117 oCtx.translate(X,Y); 118 oCtx.rotate(hours*30*Math.PI/180); 119 oCtx.beginPath(); 120 oCtx.moveTo(0,-80); 121 oCtx.lineTo(0,10); 122 oCtx.stroke(); 123 oCtx.closePath(); 124 oCtx.restore(); 125 126 //分时针; 127 oCtx.save(); 128 oCtx.lineCap="round"; 129 oCtx.lineWidth = 6; 130 oCtx.strokeStyle = "#000" ; 131 oCtx.translate(X,Y); 132 oCtx.rotate( minutes*6*Math.PI/180 ); 133 oCtx.beginPath(); 134 oCtx.moveTo(0,-120); 135 oCtx.lineTo(0,10); 136 oCtx.stroke(); 137 oCtx.closePath(); 138 oCtx.restore(); 139 140 //画分针; 141 oCtx.save(); 142 oCtx.lineCap="round"; 143 oCtx.lineWidth = 2; 144 oCtx.strokeStyle = "red" ; 145 oCtx.translate(X,Y); 146 oCtx.rotate( seconds*6*Math.PI/180 ); 147 oCtx.beginPath(); 148 oCtx.moveTo(0,-160); 149 oCtx.lineTo(0,10); 150 oCtx.stroke(); 151 oCtx.closePath(); 152 oCtx.restore(); 153 154 //画盖住的底层的白圆; 155 oCtx.save(); 156 oCtx.arc(X,Y,15,0,2*Math.PI); 157 oCtx.fillStyle="#000"; 158 oCtx.fill(); 159 oCtx.restore(); 160 161 oCtx.save(); 162 oCtx.beginPath(); 163 oCtx.arc(X,Y,200,0,2*Math.PI,true); 164 oCtx.stroke(); 165 166 oCtx.closePath(); 167 oCtx.restore(); 168 169 } 170 171 oCanvas.onmousedown = function( event ){ 172 173 var ev = window.event || event; 174 175 176 var btn = false; 177 178 if( oCtx.isPointInPath( ev.clientX , ev.clientY ) ){ 179 var yuanX = X; 180 var yuanY = Y; 181 var disX = ev.clientX; 182 var disY = ev.clientY; 183 btn = true; 184 185 186 } 187 188 document.onmousemove = function( event ){ 189 190 var ev = window.event || event; 191 192 if( btn ){ 193 194 clearInterval(setTime); 195 196 var lastX = ev.clientX - disX; 197 var lastY = ev.clientY - disY; 198 199 X = lastX + yuanX; 200 Y = lastY + yuanY; 201 202 if( X <= 200 ){ 203 204 X = 200; 205 206 } 207 208 if( X >= winWidth - 200 ){ 209 X = winWidth - 200; 210 } 211 212 if( Y <= 200 ){ 213 Y = 200; 214 } 215 216 if( Y >= winHeight - 200 ){ 217 Y = winHeight - 200; 218 } 219 220 setTime(); 221 } 222 223 } 224 } 225 226 oCanvas.onmouseup = function(){ 227 228 btn = false; 229 document.onmousemove = null; 230 timer = setInterval(setTime,1000); 231 232 233 } 234 235 window.onresize = function(){ 236 237 var bodyWidth = document.body.clientWidth; 238 var bodyHeigth = document.body.clientHeight; 239 240 propX = bodyWidth / winWidth; 241 propY = bodyHeigth / winHeight; 242 243 if( X >= bodyWidth - 200 ){ 244 X = X * propX; 245 } 246 247 if( Y >= bodyHeigth - 200 ){ 248 Y = Y * propY; 249 } 250 251 252 winWidth = bodyWidth; 253 winHeight = bodyHeigth; 254 255 oCanvas.setAttribute('width',winWidth); 256 oCanvas.setAttribute('height',winHeight); 257 258 259 260 } 261 } 262 263 </script> 264 </head> 265 <body> 266 <canvas id="canvas"></canvas> 267 </body> 268 </html>
后记:
其实网上好多这种画表的也没啥可说的就是css3那个差不多。。。
主要是写拖拽让我费点了功夫 isPointInPath() 这个方法是判断点点击是否在画图上但是只是最后一次绘画上面，
所以偷巧在整个表都画完的最后在画了一个空圆做这个isPointInPath()用，剩下就跟Dom拖拽基本一样了。
不过还是有点小bug 就是 在放大缩小浏览器的时候 绘制的圆心点的X、Y坐标可能不对，虽然我用了比例去算这个 但还是有点小问题，没有想出好的解决办法，有知道怎么解决谢谢告知。。。。