HTML5 Canvas实战——HTML5 Canvas时间效果
function clockTest() { var canvas = document.getElementById('canvas'); if (!(canvas && canvas.getContext)) { return; } var ct = canvas.getContext('2d'); var w = canvas.width = 500; var h = canvas.height = 300; var r1 = 95; var c3 = ct.createLinearGradient(0, 0, 0, h); c3.addColorStop(0, '#FFF'); c3.addColorStop(0.2, '#dad9e0'); c3.addColorStop(0.4, '#adb0b6'); c3.addColorStop(0.6, '#8f8f99'); c3.addColorStop(0.8, '#86878b'); c3.addColorStop(1, '#88898e'); var c4 = ct.createRadialGradient(w / 2, h / 2, w, w, w, w); c4.addColorStop(0, 'rgba(0,0,0,1)'); c4.addColorStop(0.2, 'rgba(0,0,0,0.8)'); c4.addColorStop(0.3, 'rgba(0,0,0,0)'); c4.addColorStop(0, 'rgba(0,0,0,0)'); function clock() { var d = new Date(); var dH = d.getHours(); var dM = d.getMinutes(); var dS = d.getSeconds(); //return; ct.clearRect(0, 0, w, h); ct.save(); ct.beginPath(); ct.strokeStyle = 'rgba(0,0,0,0.1)'; ct.fillStyle = c3; ct.arc(w / 2, h / 2, 135, 0, Math.PI * 2, true); ct.closePath(); ct.fill(); ct.stroke(); ct.restore(); ct.save(); ct.beginPath(); ct.strokeStyle = 'rgba(0,0,0,0.1)'; ct.fillStyle = '#E2E9F1'; ct.arc(w / 2, h / 2, 120, 0, Math.PI * 2, true); ct.closePath(); ct.fill(); ct.stroke(); ct.restore(); for (var i = 0; i < 60; i++) { ct.save(); ct.lineCap = 'square'; ct.beginPath(); if (i % 5 === 0) { ct.lineWidth = 5; ct.strokeStyle = '#333'; } else { ct.lineWidth = 2; ct.strokeStyle = '#333'; } ct.translate(w / 2, h / 2); ct.rotate(i * 6 * Math.PI / 180); ct.moveTo(0, -120); if (i % 5 === 0) { ct.lineTo(0, -105); } else { ct.lineTo(0, -110); } ct.closePath(); ct.stroke(); ct.restore(); } ct.save(); ct.translate(w / 2, h / 2); ct.fillColor = '#369'; ct.textAlign = 'center'; ct.textBaseline = 'middle'; ct.font = '25px times new roman'; ct.fillText(12, 0, -r1); ct.fillText(3, r1, -0); ct.fillText(6, 0, r1); ct.fillText(9, -r1, -0); ct.fillStyle = '#333'; ct.font = '16px verdara'; ct.fillText('KINGWELL', 0, 50); ct.restore(); ct.save(); ct.beginPath(); ct.translate(w / 2, h / 2); ct.rotate((dH + dM / 60) * 30 * Math.PI / 180); ct.lineWidth = 10; ct.strokeStyle = '#222'; ct.moveTo(0, 15); ct.lineTo(0, -70); ct.closePath(); ct.stroke(); ct.restore(); ct.save(); ct.beginPath(); ct.translate(w / 2, h / 2); ct.rotate((dM + dS / 60) * 6 * Math.PI / 180); ct.lineWidth = 6; ct.strokeStyle = '#333'; ct.moveTo(0, 20); ct.lineTo(0, -90); ct.closePath(); ct.stroke(); ct.restore(); ct.save(); ct.beginPath(); ct.translate(w / 2, h / 2); ct.rotate(dS * 6 * Math.PI / 180); ct.lineWidth = 2; ct.strokeStyle = '#C00'; ct.moveTo(0, 25); ct.lineTo(0, -100); ct.closePath(); ct.stroke(); ct.restore(); ct.save(); ct.beginPath(); ct.translate(w / 2, h / 2); ct.arc(0, 0, 6, 0, Math.PI * 2, true); ct.fillStyle = '#C00'; ct.closePath(); ct.fill(); ct.restore(); setTimeout(clock, 1000); } clock();}clockTest();
?
