1 <canvas id="clock" width="500" height="500" style="background-color: yellow"></canvas>
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(); 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);
