1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78
| (function() { document.body.innerHTML='<canvas id="canvas" width="1000" height="1000">浏览器不支持</canvas>' const canvas = document.querySelector('#canvas'); if (!canvas.getContext) return; let context = canvas.getContext('2d'); function time() { context.clearRect(0, 0, canvas.width, canvas.height); let x = 200; let y = 200; let r = 150; context.lineWidth = 1; context.beginPath(); Array(60).fill(0).forEach((item, index) => { context.moveTo(x, y); context.arc(x,y,r,6 * index * Math.PI / 180,6 * (index + 1) * Math.PI / 180,false); }); context.closePath(); context.stroke(); context.fillStyle = '#fff'; context.beginPath(); context.moveTo(x, y); context.arc(x, y, r * 20 / 21, 0, 360 * Math.PI / 180, false); context.closePath(); context.fill();
context.lineWidth = 2; context.beginPath(); Array(12).fill(0).forEach((item, index) => { context.moveTo(x, y); context.arc(x,y,r,30 * index * Math.PI / 180,30 * (index + 1) * Math.PI / 180,false); }); context.closePath(); context.stroke();
context.fillStyle = '#fff'; context.beginPath(); context.moveTo(x, y); context.arc(x, y, r * 19 / 21, 0, 360 * Math.PI / 180, false); context.closePath(); context.fill();
var date = new Date(); var hour = date.getHours(); var minute = date.getMinutes(); var second = date.getSeconds(); var hourValue = (-90 + hour * 30 + minute / 2 + second / 60) * Math.PI / 180; var minuteValue = (-90 + minute * 6 + second / 12) * Math.PI / 180; var secondValue = (-90 + second * 6) * Math.PI / 180;
context.lineWidth = 4; context.beginPath(); context.moveTo(x, y); context.arc(x, y, r * 8 / 21, hourValue, hourValue, false); context.closePath(); context.stroke(); context.lineWidth = 2; context.beginPath(); context.moveTo(x, y); context.arc(x, y, r * 15 / 21, minuteValue, minuteValue, false); context.closePath(); context.stroke(); context.beginPath(); context.moveTo(x, y); context.arc(x, y, r * 18 / 21, secondValue, secondValue, false); context.closePath(); context.stroke(); setTimeout(time, 1000); } time(); })();
|