利用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);//旋转角度 角度*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 //设置旋转角度 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();  //分针 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);  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);