此為博主在研究參考多個時鐘程式碼後，自己總結創新編寫的一個簡潔齊全又美觀的時鐘，本著自己獲益也回饋大眾地分享出來，如有問題或更好的建議歡迎與我交流。      

首先建立一個canvas來裝整個時鐘介面：

<canvas id="MyClock" width="1300px" height="700px"> </canvas>

      接下來就是在底面上繪製出刻度、指標以及日期顯示，還可以給自己加個Logo ^_^。

     在JavaScript裡面實現這些功能，並且設定定時器讓canvas每秒鐘就重繪一次，實現時鐘的走動。進入正題：

• 變數宣告：

​ var canvas = document.getElementById('MyClock');//Get the ID of the canvas 
 var ctx = canvas.getContext('2d');

 var r = canvas.height / 3;  //Radius of my clock

 //the center will be the new strart piont
 ctx.translate(canvas.width / 2, canvas.height * 2 / 5); 
       
 var BgSize = 2 * r + 34;   //The size and position of the Background Picture
 var BgPosition = -r - 17;

 img = new Image();//load the BG picture
 img.src = "bg3.png";​
 

•  繪製刻度。前一個函式為繪製菱形做刻度(個人覺得畫出來比矩形好看)，後面就開始繪製刻度，畫布每次旋轉pi/30度(也就是將圓分為60份，每次旋轉一份)就繪製分鐘刻度，每旋轉了pi/30*5度(每五個分鐘刻度就繪製一個時鐘刻度)就繪製一個時鐘刻度。

/*********** Draw A Rhombus as the scales of my clock *********************/
function drawRhombus(x, y, width, height, color) {
     ctx.moveTo(x, y - height / 2); //the shape of the Rhombus
     ctx.lineTo(x + width / 2, y);
     ctx.lineTo(x, y + height / 2);
     ctx.lineTo(x - width / 2, y);
     ctx.lineTo(x, y - height / 2);

     ctx.fillStyle = color;
     ctx.closePath();
     ctx.fill();
}


/************ Draw  the Scales of my clock ******************************/
function drawClockScale() {
    var hourScales = ["Ⅻ", "Ⅰ", "Ⅱ", "Ⅲ", "Ⅳ", "Ⅴ", "Ⅵ", "Ⅶ", "Ⅷ", "Ⅸ", "Ⅹ", "Ⅺ"];
    var rad = 0, k = 0;
    ctx.fillStyle = '#000';   //the color to fill the canvas
    ctx.drawImage(img, BgPosition, BgPosition, BgSize, BgSize); //background of myclock
    ctx.globalCompositeOperation = "source-over";

    for (i = 0; i < 60; i++) {
        ctx.save();      // record the state of last canvas
        rad = i * Math.PI / 30;//divided into 60 pieces，each of them is 2π/60
        ctx.rotate(rad);  // Rotate the canvas
        ctx.fillRect(-1.5, -r-2, 3, 8);   //Draw the the scales of minutes

        //when it is 2π/12, = 60/12
        if (i % 5 == 0) {            
           drawRhombus(0, -r, 10, 17, '#000');
           ctx.font = '27px Cambria Math';
           ctx.fillText(hourScales[k], -10, 37 - r); //Draw the Time Scales
           k++;
        }
       ctx.restore();  // restore the last canvas
     }
}
 

•  繪製時針、分針。用矩形作指標，獲取當前日期並按角度計算繪製。同時繪製文字版日期顯示，順便添個Logo。

/****************** Draw A Rectangle as the hands ************************/ 
function drawHand(rotate, width, height) {
     ctx.save();
     rotate = rotate * Math.PI / 180;   
     ctx.rotate(rotate); //rotate the canvas
     ctx.fillRect(-10, 0, width, height);
     ctx.restore();
}


/******************  Draw The Hands  ************************************/ 
function setTime() {
     //Get the real time
     today = new Date();     
     var hour =  today.getHours();
     var minute = today.getMinutes();
     var second =  today.getSeconds();
     var year = today.getFullYear();
     var month = ((today.getMonth() + 1) < 10) ? "0" + (today.getMonth() + 1) : (today.getMonth() + 1);//to show 01 when month = 1 
     var date = (today.getDate() < 10) ? "0" + today.getDate():today.getDate();
     var day = today.getDay();   //get the weekday
     var weekDay = ['星期日', '星期一', '星期二', "星期三", '星期四', '星期五', '星期六'];

     var hourRotate, minRotate, secRotate;
     secRotate = second * 6 - 90;
     drawHand(secRotate, r - 30, 2);      //Draw the second hand 
     minRotate = (minute * 60 + second) * 0.1 - 90;
     drawHand(minRotate, r - 50, 4);      //Draw the minute hand 
     hourRotate = (hour * 60 * 60 + minute * 60 + second) / 120 - 90;
     drawHand(hourRotate, r - 70, 5);     //Draw the hour hand 

     //Show the date
     ctx.font = '22px Cambria Math';
     //year-month-day  weekday
     ctx.fillText(year + "-" + month + "-" + date + "  " + weekDay[day], -r / 3, r * 2 / 5); 
     //hour:minute:second
     ctx.fillText(((hour<10)?"0"+hour:hour )+ ":" + ((minute<10)?"0"+minute:minute) + ":" + ((second<10)?"0"+second:second), -r/5, r *2/5+30); 

     //Draw the logo of my clock  
     ctx.font = '29px Cambria Math';  
     ctx.fillText("LLozel", -r/5+5, -r / 2+10);
}

• 最後一步，新增定時器，讓時鐘“走”起來。每秒鐘重繪一次畫面。

/*******************  Timer to run the clock  **********************************/
setInterval(function () {
   //Clear the canvas
   ctx.clearRect(-canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height);
   //Draw the Scales
   drawClockScale();
   //Draw the hands
   setTime();
}, 1000);     //1000 stand for 1 second

最終效果圖：