利用html5制作一個時鐘動畫_html/css

1 

 1 var clock=document.getElementById("clock"); 2 var cxt=clock.getContext("2d"); 3 function drawNow(){ 4 var now=new Date(); 5 var hour=now.getHours(); 6 var min=now.getMinutes(); 7 var sec=now.getSeconds(); 8 hour=hour>12?hour-12:hour; 9 hour=hour+min/60; 10 //表盤(藍色) 11 cxt.lineWidth=10; 12 cxt.strokeStyle="blue" 13 cxt.beginPath(); 14 cxt.arc(250,250,200,0,360,false); 15 cxt.closePath(); 16 cxt.stroke(); 17 //刻度 18 //時刻度 19 for(var i=0;i<12;i++){ 20 cxt.save(); 21 cxt.lineWidth=7; 22 cxt.strokeStyle="black"; 23 cxt.translate(250,250); 24 cxt.rotate(i*30*Math.PI/180);//旋轉(zhuǎn)角度 角度*Math.PI/180=弧度 25 cxt.beginPath(); 26 cxt.moveTo(0,-170); 27 cxt.lineTo(0,-190); 28 cxt.closePath(); 29 cxt.stroke(); 30 cxt.restore(); 31 } 32 //分刻度 33 for(var i=0;i<60;i++){ 34 cxt.save(); 35 //設置分刻度的粗細 36 cxt.lineWidth=5; 37 //重置畫布原點 38 cxt.translate(250,250); 39 //設置旋轉(zhuǎn)角度 40 cxt.rotate(i*6*Math.PI/180); 41 //畫分針刻度 42 cxt.strokeStyle="black"; 43 cxt.beginPath(); 44 cxt.moveTo(0,-180); 45 cxt.lineTo(0,-190); 46 cxt.closePath(); 47 cxt.stroke(); 48 cxt.restore(); 49 } 50 51 //時針 52 cxt.save(); 53 // 設置時針風格 54 cxt.lineWidth=7; 55 cxt.strokeStyle="black"; 56 cxt.translate(250,250); 57 cxt.rotate(hour*30*Math.PI/180); 58 cxt.beginPath(); 59 cxt.moveTo(0,-140); 60 cxt.lineTo(0,10); 61 cxt.closePath(); 62 cxt.stroke(); 63 cxt.restore(); 64 //分針 65 cxt.save(); 66 cxt.lineWidth=5; 67 cxt.strokeStyle="black"; 68 //設置異次元空間分針畫布的中心 69 cxt.translate(250,250); 70 cxt.rotate(min*6*Math.PI/180); 71 cxt.beginPath(); 72 cxt.moveTo(0,-160); 73 cxt.lineTo(0,15); 74 cxt.closePath(); 75 cxt.stroke() 76 cxt.restore(); 77 78 //秒針 79 cxt.save(); 80 //設置秒針的風格 81 //顏色:紅色 82 cxt.strokeStyle="red"; 83 cxt.lineWidth=3; 84 //重置原點 85 cxt.translate(250,250); 86 //設置角度 87 //cxt.rotate(330*Math.PI/180); 88 cxt.rotate(sec*6*Math.PI/180); 89 90 cxt.beginPath(); 91 cxt.moveTo(0,-170); 92 cxt.lineTo(0,20); 93 cxt.closePath(); 94 cxt.stroke(); 95 //畫出時針,分針,秒針的交叉點 96 cxt.beginPath(); 97 cxt.arc(0,0,5,0,360,false); 98 cxt.closePath(); 99 //設置填充100 cxt.fillStyle="gray";101 cxt.fill();102 //cxt.strokeStyle="red";103 cxt.stroke();104 105 //畫出秒針的小圓點106 cxt.beginPath();107 cxt.arc(0,-140,5,0,360,false);108 cxt.closePath();109 //設置填充110 cxt.fillStyle="gray";111 cxt.fill();112 //cxt.strokeStyle="red";113 cxt.stroke();114 115 116 cxt.restore();117 118 119 120 }121 function drawClock(){122 cxt.clearRect(0,0,500,500);123 drawNow();124 }125 drawNow();126 setInterval(drawClock,1000);