用HTML5做个时钟
心情不好，游戏不想玩，弄个小东西排解一下心中的不畅：本时钟是通过HTML5的Canvas实现的，相关的技术大家可以到这儿去看看： 链接地址
下面就没有什么好所的了，上面的链接中有详细的说明，有图有易做图 ～～
下面是代码：
001 <html>
002 <head>
003 <title>HTML5 Test</title>
004 <script type="application/x-javascript">
005 var panel, ctx, img;
006 var pw, ph, ox, oy;
007 function init(){
008 panel = document.getElementById("panel");
009 pw = panel.width;
010 ph = panel.height;
011 ox = pw/2;
012 oy = ph/2;
013 if(panel.getContext){
014 ctx = panel.getContext('2d');
015 }else{
016 alert('Your browser is not support Canvas tag!');
017 }
018
019 ctx.translate(ox, oy);
020
021 img = new Image();
022 img.onload = function(){
023 setInterval('draw()',1000);
024 }
025 img.src = 'bg.jpg';
026 }
027
028
029 function drawSecond(){
030 ctx.save();
031 ctx.rotate(Math.PI/180*currTime().s*6);
032 ctx.strokeStyle = "#09f";
033 ctx.lineWidth = 2;
034 ctx.lineCap = 'round'
035 ctx.beginPath();
036 ctx.moveTo(0,0);
037 ctx.lineTo(0,-140);
038 ctx.stroke();
039 ctx.restore();
040 }
041
042 function drawMinute(){
043 ctx.save();
044 ctx.rotate(Math.PI/180*currTime().m*6);
045 ctx.strokeStyle = "#f90";
046 ctx.lineWidth = 6;
047 ctx.lineCap = 'round'
048 ctx.beginPath();
049 ctx.moveTo(0,0);
050 ctx.lineTo(0,-100);
051 ctx.stroke();
052 ctx.restore();
053 }
054
055 function drawHour(){
056 ctx.save();
