<canvas id="myCanvas" width="500" height="500">快去升級瀏覽器吧~</canvas>

window.addEventListener("load", function(){//獲取畫布上下文var context = document.getElementById("myCanvas").getContext("2d");//判斷上下文是否存在，存在則可以執行接下來的代碼if(context){//開始一個新的子路徑context.beginPath();//我們準備畫兩個同心圓作為時鐘的邊框//畫一個外面的大圓context.arc(100,100,99,0,2*Math.PI,false);//以某種很好看的藍色填充context.fillStyle = "#315f9b";context.fill();//畫大圓的邊線context.stroke();//開始一條新的子路徑，//此處是必須的，要不然之后填充的顏色會把之前的全部覆蓋context.beginPath();//將開始點移動到(194,100)，用半徑和圓心計算得出的點context.moveTo(194,100);//畫內部的小圓（圓神？）context.arc(100,100,94,0,2*Math.PI,false);//用另一種很好看的稍淺藍色填充內部小圓context.fillStyle = "#4ba2cf";context.fill();context.stroke();//藍胖子出現啦~//創建一個Image對象，將它的src設置為藍胖子的圖片var image = new Image();image.src = "2.png";//用上下文的方法drawImage將圖片從點(25,25)開始畫，畫在邊長150的矩形中context.drawImage(image,25,25,150,150);//移動變換矩陣//移動后(100,100)作為新的原點，即(0,0)context.translate(100,100);//用一個同樣很好看的藍色來畫我們的時間點context.fillStyle = "#02285a";//fillText第一個參數為要畫的字符串，第二個參數為x，第三為y//以下x,y值是調試后的效果，大家根據不同情況，再做調整哦context.fillText("12",-5,-80);context.fillText("6",-4,87);context.fillText("3",80,1);context.fillText("9",-86,1);//稍候詳述此函數nowTime(context);}},false);

function nowTime(context){//創建一個日期對象，用來獲取本地的時間var myDate = new Date();//獲取小時，分鐘，秒鐘var myHour = myDate.getHours();//將小時轉換為12時制if(myHour >= 12){myHour = myHour-12;}var myMin = myDate.getMinutes();var mySec = myDate.getSeconds();//描繪小時//用來存放當前小時在表盤上的弧度var hourArc;//以3時作為圓周的起點，順時針表示弧度if(myHour < 3){hourArc = 2*Math.PI-(3-myHour)*Math.PI/6;}else{hourArc = (myHour-3)*Math.PI/6;}//當指向3,6,9,12時，正好為90°的倍數//此處因為角度轉換為弧度有偏差，所以特別處理下switch(myHour){case 0:hourArc = Math.PI*3/2;break;case 3:hourArc = 0;break;case 6:hourArc = Math.PI/2;break;case 9:hourArc = Math.PI;break;}//調用drawTime函數，在表盤上畫出小時針drawTime(context,hourArc,60);//描繪分鐘//用來存放當前分鐘在表盤上的弧度var minArc; //以15分作為圓周的起點，順時針表示弧度if(myMin < 15){minArc = 2*Math.PI-(15-myMin)*Math.PI/30;}else{minArc = (myMin-15)*Math.PI/30;}//處理分鐘，依然是此處因為角度轉換為弧度有偏差，所以特別處理下switch(myMin){case 0:minArc = Math.PI*3/2;break;case 15:minArc = 0;break;case 30:minArc = Math.PI/2;break;case 45:minArc = Math.PI;break;}//調用drawTime函數，在表盤上畫出分鐘針drawTime(context,minArc,80);//描繪秒鐘//用來存放當前秒鐘在表盤上的弧度var secArc;//以15秒作為圓周的起點，順時針表示弧度if(mySec < 15){secArc = 2*Math.PI-(15-mySec)*Math.PI/30;}else{secArc = (mySec-15)*Math.PI/30;}//處理秒鐘，依然依然此處因為角度轉換為弧度有偏差，所以特別處理下switch(mySec){case 0:secArc = Math.PI*3/2;break;case 14:secArc = 0;break;case 29:secArc = Math.PI/2;break;case 44:secArc = Math.PI;break;}//調用drawTime函數，在表盤上畫出小時針drawTime(context,secArc,80,"red");//設置一個超時調用函數，每一秒超時調用nowTime更新時鐘setTimeout(function(){//調用畫新的指針前，當然應該要清除下原來的時針吧，用clearTime函數，真的好用！clearTime(context);//把閑雜指針清除了，再畫一次當前的指針吧~nowTime(context);},1000);}

function drawTime(context,theArc,theLength,color="#000"){//保存當前的畫布環境，和restore方法配合使用能夠恢復畫布上下文context.save();//旋轉畫布，rotate傳入的參數代表旋轉的弧度context.rotate(theArc);//開始一條新的子路徑，我們開始畫指針啦context.beginPath();//將開始點移動到(0,0)context.moveTo(0,0);//畫一條到(theLength,0)的路徑context.lineTo(theLength,0);//用指定的color顏色畫這條路徑context.strokeStyle = color;//路徑的寬度為2context.lineWidth = 2;//路徑是不可見的，如果要看到路徑，需要用stroke來描線，而如何描這條線，可以由我們以上用到的幾個屬性來定義context.stroke();//恢復上下文context.restore();}

function clearTime(context){//我們開始一條新的子路徑，然后描繪一個充斥著好看藍色的圓，把我們之前畫的指針都遮蓋住，相當于清除了一次表盤context.beginPath();context.arc(0,0,80,0,2*Math.PI,false);context.fillStyle = "#4ba2cf";context.fill();//很不幸，我們的藍胖子也被誤傷了，所以再召喚它一次吧，決定就是你啦，皮卡丘（？咦）var image = new Image();image.src = "2.png";//這個坐標和第一次加載的坐標不同，因為我們修改了變換矩陣，還記得嗎？所以，它們的坐標應該是互補的context.drawImage(image,-75,-75,150,150);}