利用HTML5 Canvas实现一个时钟
jopen
13年前
本时钟是通过HTML5的Canvas实现的，相关的技术大家可以到这儿去看看： 链接地址
下面就没有什么好所的了，上面的链接中有详细的说明，有图有真相 ～～
下面是代码：
<html> <head> <title>HTML5 Test</title> <script type="application/x-javascript"> var panel, ctx, img; var pw, ph, ox, oy; function init(){ panel = document.getElementById("panel"); pw = panel.width; ph = panel.height; ox = pw/2; oy = ph/2; if(panel.getContext){ ctx = panel.getContext('2d'); }else{ alert('Your browser is not support Canvas tag!'); } ctx.translate(ox, oy); img = new Image(); img.onload = function(){ setInterval('draw()',1000); } img.src = 'bg.jpg'; } function drawSecond(){ ctx.save(); ctx.rotate(Math.PI/180*currTime().s*6); ctx.strokeStyle = "#09f"; ctx.lineWidth = 2; ctx.lineCap = 'round' ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(0,-140); ctx.stroke(); ctx.restore(); } function drawMinute(){ ctx.save(); ctx.rotate(Math.PI/180*currTime().m*6); ctx.strokeStyle = "#f90"; ctx.lineWidth = 6; ctx.lineCap = 'round' ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(0,-100); ctx.stroke(); ctx.restore(); } function drawHour(){ ctx.save(); ctx.rotate(Math.PI/180*currTime().h*30+Math.PI/180*currTime().m/ 2); ctx.strokeStyle = "#999"; ctx.lineWidth = 10; ctx.lineCap = 'round' ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(0,-60); ctx.stroke(); ctx.restore(); } function draw(){ ctx.clearRect(-pw/2,-ph/2,pw,ph); drawBackground(); drawSecond(); drawMinute(); drawHour(); document.getElementById('time').innerHTML=currTimeStr(); } function drawBackground(){ ctx.save(); ctx.translate(0, 0); ctx.drawImage(img,-250,-250,500,500); ctx.restore(); } function currTimeStr(){ var d = new Date(); var h = d.getHours(); var m = d.getMinutes(); var s = d.getSeconds(); return h+':'+m+':'+s } function currTime(){ var d = new Date(); var h = d.getHours(); var m = d.getMinutes(); var s = d.getSeconds(); if(h>12){ h = h-12; } return {"h":h,"m":m,"s":s}; } </script> </head> <body onload="init()"> <canvas style="border:1px solid #000" id="panel" width="500" height="500 "> Your browser is not support Canvas tag! </canvas> <br/> <span id="time"></span> </body> </html>下面是背景图片：