一代码
<!DOCTYPE html ><head><meta charset="UTF-8" ><title>绘制动态时钟</title><script type="text/javascript">var canvas;var context;function window_onload() {canvas = document.getElementById("canvas");context = canvas.getContext('2d');setInterval("draw()",1000);}function draw() {var radius = Math.min(canvas.width / 2, canvas.height / 2) - 25;var centerx = canvas.width / 2;var centery = canvas.height / 2;context.clearRect(0, 0, canvas.width, canvas.height);context.save();context.fillStyle = '#efefef';context.strokeStyle = '#c0c0c0';context.beginPath();context.arc(centerx, centery, radius, 0, Math.PI*2, 0);context.fill();context.stroke();context.closePath();context.restore();var r = radius - 10;context.font = 'bold 16px 宋体';Drawtext('1', centerx + (0.5 * r), centery - (0.88 * r));Drawtext('2', centerx + (0.866 * r), centery - (0.5 * r));Drawtext('3', centerx + radius-10, centery);Drawtext('4', centerx + (0.866 * r), centery + (0.5 * r));Drawtext('5', centerx + (0.5 * r), centery + (0.866 * r));Drawtext('6', centerx , centery +r);Drawtext('7', centerx - (0.5 * r), centery + (0.866 * r));Drawtext('8', centerx - (0.866 * r), centery + (0.49 * r));Drawtext('9', centerx-radius+10, centery);Drawtext('10', centerx - (0.866 * r), centery - (0.50 * r));Drawtext('11', centerx - (0.51 * r), centery - (0.88 * r));Drawtext('12', centerx, 35);context.save();context.fillStyle = 'black';context.beginPath();context.arc(centerx, centery, 3, 0, Math.PI * 2, 0);context.closePath();context.fill();context.stroke();context.restore();//var date = new date();// var h = date.getHours();//var m = date.getMinutes();//var s = date.getSeconds();//var a = ((h / 12) * Math.PI * 2) - 1.57 + ((m / 60) * 0.524);var h = 13;var m = 24;var s = 59;var a = ((h / 12) * Math.PI * 2) - 1.57 + ((m / 60) * 0.524);context.save();context.lineWidth = 3;context.fillStyle = 'darkgray';context.strokeStyle = 'gray';context.beginPath();context.arc(centerx, centery, radius - 55, a + 0.01, a, 1);context.lineTo(centerx, centery);context.arc(centerx, centery, radius - 40, ((m / 60) * 6.27) - 1.57, ((m / 60) * 6.28) - 1.57, 0);context.lineTo(canvas.width / 2, canvas.height / 2);context.arc(centerx, centery, radius - 30, ((s / 60) * 6.27) - 1.57, ((s / 60) * 6.28) - 1.57, 0);context.lineTo(centerx, centery);context.closePath();context.fill();context.stroke();context.restore();var hours = String(h);var minutes = String(m);var seconds = String(s);if (hours.length == 1) h = '0' + h;if (minutes.length == 1) m = '0' + m;if (seconds.length == 1) s = '0' + s;var str = h + ':' + m + ':' + s;Drawtext(str, centerx, centery + radius + 12);}function Drawtext(text, x, y) {context.save();x -= (context.measureText(text).width / 2);y += 9;context.beginPath();context.translate(x, y);context.fillText(text, 0, 0);context.restore();}</script><style type="text/css">div{display:-moz-box;display:-webkit-box;-moz-box-pack:center;-webkit-box-pack:center;width:100%;}canvas{background-color:White;}</style></head><body onload="window_onload()"><div><h1>使用canvas元素绘制指针动画时钟</h1></div><div><canvas id="canvas" width="200px" height="200px"></canvas></div></body></html>
