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     //表盤(pán)(藍(lán)色) 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     //時(shí)刻度 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         //設(shè)置分刻度的粗細(xì) 36         cxt.lineWidth=5; 37         //重置畫(huà)布原點(diǎn) 38         cxt.translate(250,250); 39         //設(shè)置旋轉(zhuǎn)角度 40         cxt.rotate(i*6*Math.PI/180); 41         //畫(huà)分針刻度 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     //時(shí)針 52     cxt.save(); 53     // 設(shè)置時(shí)針風(fēng)格 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     //設(shè)置異次元空間分針畫(huà)布的中心 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     //設(shè)置秒針的風(fēng)格 81     //顏色:紅色 82     cxt.strokeStyle="red"; 83     cxt.lineWidth=3; 84     //重置原點(diǎn) 85     cxt.translate(250,250); 86     //設(shè)置角度 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     //畫(huà)出時(shí)針,分針,秒針的交叉點(diǎn) 96     cxt.beginPath(); 97     cxt.arc(0,0,5,0,360,false); 98     cxt.closePath(); 99     //設(shè)置填充100     cxt.fillStyle="gray";101     cxt.fill();102     //cxt.strokeStyle="red";103     cxt.stroke();104 105     //畫(huà)出秒針的小圓點(diǎn)106     cxt.beginPath();107     cxt.arc(0,-140,5,0,360,false);108     cxt.closePath();109     //設(shè)置填充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);

?

?

?