使用canvas绘制动画时钟
一代码
<!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>
