|
| 1 | + <!DOCTYPE html> |
| 2 | +<html> |
| 3 | +<body> |
| 4 | + |
| 5 | +<canvas id="c" width="600" height="600" style="background-color:black"> |
| 6 | +</canvas> |
| 7 | +<script> |
| 8 | +var canvas = document.getElementById("c"); |
| 9 | +var ctx = canvas.getContext("2d"); |
| 10 | +var radius = canvas.height / 2; |
| 11 | +ctx.translate(radius, radius); |
| 12 | +radius = radius * 0.90 |
| 13 | +setInterval(drawClock, 1000); |
| 14 | +function drawClock() |
| 15 | + { |
| 16 | + drawFace(ctx, radius); |
| 17 | + drawNumbers(ctx, radius); |
| 18 | + drawTime(ctx, radius); |
| 19 | + } |
| 20 | + function drawFace(ctx, radius) |
| 21 | +{ |
| 22 | + var grad; |
| 23 | + ctx.beginPath(); |
| 24 | + ctx.arc(0,0, radius, 0, 2 * Math.PI); |
| 25 | + ctx.fillStyle = 'black'; |
| 26 | + ctx.fill(); |
| 27 | + |
| 28 | + grad = ctx.createRadialGradient(0, 0 ,radius * 0.75, 0, 0, radius * 1.05); |
| 29 | + grad.addColorStop(0, 'red'); |
| 30 | + grad.addColorStop(0.5, 'red'); |
| 31 | + grad.addColorStop(1, 'black'); |
| 32 | + ctx.strokeStyle = grad; |
| 33 | + ctx.lineWidth = radius*0.1; |
| 34 | + ctx.stroke(); |
| 35 | + |
| 36 | + ctx.beginPath(); |
| 37 | + ctx.arc(0,0, radius * 0.1, 0, 2 * Math.PI); |
| 38 | + ctx.fillStyle = 'red'; |
| 39 | + ctx.fill(); |
| 40 | +} |
| 41 | +function drawNumbers(ctx, radius) |
| 42 | +{ |
| 43 | + var ang; |
| 44 | + var num; |
| 45 | + ctx.font = radius * 0.15 + "px arial"; |
| 46 | + ctx.textBaseline = "middle"; |
| 47 | + ctx.textAlign = "center"; |
| 48 | + for(num = 1; num < 13; num++) |
| 49 | + { |
| 50 | + ang = num * Math.PI / 6; |
| 51 | + ctx.rotate(ang); |
| 52 | + ctx.translate(0, -radius * 0.85); |
| 53 | + ctx.rotate(-ang); |
| 54 | + ctx.fillText(num.toString(),0,0); |
| 55 | + ctx.rotate(ang); |
| 56 | + ctx.translate(0, radius * 0.85); |
| 57 | + ctx.rotate(-ang); |
| 58 | + } |
| 59 | +} |
| 60 | + function drawTime(ctx, radius) |
| 61 | + { |
| 62 | + var now = new Date(); |
| 63 | + var hour = now.getHours(); |
| 64 | + var minute = now.getMinutes(); |
| 65 | + var second = now.getSeconds(); |
| 66 | + //hour |
| 67 | + hour = hour%12; |
| 68 | + hour = (hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second* Math.PI/(360*60)); |
| 69 | + drawHand(ctx, hour, radius*0.5, radius*0.05); |
| 70 | + //minute |
| 71 | + minute = (minute*Math.PI/30)+(second*Math.PI/(30*60)); |
| 72 | + drawHand(ctx, minute, radius*0.7, radius*0.05); |
| 73 | + // second |
| 74 | + second = (second*Math.PI/30); |
| 75 | + drawHand(ctx, second, radius*0.9, radius*0.02); |
| 76 | +} |
| 77 | +function drawHand(ctx, pos, length, width) |
| 78 | +{ |
| 79 | + ctx.beginPath(); |
| 80 | + ctx.lineWidth = width; |
| 81 | + ctx.lineCap = "round"; |
| 82 | + ctx.moveTo(0,0); |
| 83 | + ctx.rotate(pos); |
| 84 | + ctx.lineTo(0, -length); |
| 85 | + ctx.stroke(); |
| 86 | + ctx.rotate(-pos); |
| 87 | +} |
| 88 | +</script> |
| 89 | +</html> |
| 90 | +</body> |
0 commit comments