<style>
canvas{ border:1px solid #ccc; } </style> </head> <body> <canvas id="myCanvas" width=500 height=500></canvas> </body> <script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var originX = 250; var originY = 250; var radius = 100; setInterval(function() { ctx.clearRect(0,0,500,500); ctx.beginPath(); ctx.shadowColor = "black"; ctx.shadowBlur = 5; ctx.shadowOffsetX = 1; ctx.shadowOffsetY = 1; ctx.lineWidth = 2; var gradient = ctx.createRadialGradient(250, 250, 1, 250, 250, 100); gradient.addColorStop(0, "#f5f5f5"); gradient.addColorStop(1, "#dfdfdf"); ctx.fillStyle = gradient; ctx.arc(250, 250, 100, 0, 2 * Math.PI, true); ctx.stroke(); ctx.fill(); ctx.shadowBlur = 0; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.strokeStyle = "#333"; drawScale(); var date = new Date(); var ha = date.getHours() * 12 + (date.getMinutes() * 6 / 12) - 90; var ma = date.getMinutes() * 6 - 90; var sa = date.getSeconds() * 6 - 90; drawPointer(55, ha, 4, "#333"); drawPointer(65, ma, 3, "#777"); drawPointer(75, sa, 2, "red"); ctx.beginPath(); ctx.fillStyle = "red"; ctx.arc(originX, originY, 2.5, 0, 2 * Math.PI, true); ctx.fill(); }, 1000); function drawPointer(radius,angle,width,color){ ctx.lineWidth = width; ctx.strokeStyle = color; ctx.beginPath(); ctx.moveTo(originX,originY); ctx.lineTo(originX+radius*Math.cos(angle*Math.PI/180),originY+radius*Math.sin(angle*Math.PI/180)); ctx.stroke(); } function drawScale() { var dig = Math.PI / 30; for (var i = 0; i < 60; i++) { var r = radius - 6; var lw = 3; if (i % 5 == 0) { r = radius - 10; lw = 4; } ctx.lineWidth = lw; ctx.beginPath(); ctx.moveTo(originX + radius * Math.cos(i * dig), originY + radius * Math.sin(i * dig)); ctx.lineTo(originX + r * Math.cos(i * dig), originY + r * Math.sin(i * dig)); ctx.stroke(); } } </script>
