1、首先編寫canvas的相關格式：
　　動態獲取canvas的寬高以便修改處理，運用.translate()；將畫布中心點從預設左上角移到中心點方便後面的操作和換算。

<canvas width="800px" height="800px" id="canvas"></canvas>
        <script>
            var canvas=document.getElementById("canvas");
            var gj=canvas.getContext("2d");
            var width=canvas.width;
            
 
var height=canvas.height;
            var r=width/2
                gj.translate(r,r);

2、繪製外表盤、數字及靜態的物件：

　　繪製外表盤：（這裡我運用了漸變色使得錶盤更加好看）

                            var grd=gj.createLinearGradient(-r,-r,r,r);
                grd.addColorStop(0,"cornflowerblue");
                grd.addColorStop(1,"red");
                gj.clearRect(
 
-r,-r,r*2,r*2);
                gj.beginPath();
                gj.arc(0,0,r-5,0,2*Math.PI,false);
                gj.closePath();
                gj.strokeStyle=grd;
                gj.lineWidth=10
                gj.stroke();
                

　　繪製錶盤數字：（運用迴圈新增，運用三角函式輔助定位）

                var sz=[3,4,5,6,7,8,9,10,11,12,1,2];
                
 
for (var i=0;i<sz.length;i++) {
                    var rad=Math.PI*2/12*i;
                    var x=Math.cos(rad)*(r-50);
                    var y=Math.sin(rad)*(r-50);
                    if (sz[i]%3==0) {
                        gj.font="28px 微軟雅黑";
                    }else{
                        gj.font="20px 微軟雅黑";
                    }
                    gj.fillStyle="goldenrod";
                    gj.textAlign="center";
                    gj.textBaseline="middle";
                    gj.fillText(sz[i],x,y);
                }
                for (var j=0;j<60;j++) {
                    var rad=2*Math.PI/60*j
                    var x=Math.cos(rad)*(r-30);
                    var y=Math.sin(rad)*(r-30);
                    gj.beginPath();
                    gj.closePath();
                    if (j%5==0) {
                        gj.arc(x,y,4,0,2*Math.PI);
                        gj.fillStyle="#000";
                    } else{
                        gj.arc(x,y,2,0,2*Math.PI);
                        gj.fillStyle="#ccc";
                    }
                    gj.fill();
                }

3、繪製動態指標：

　　繪製時針：根據獲取的時間換算成角度，通過.rotate()；將指標旋轉至想要的位置，由於canvas裡上面的樣式會影響到下面的樣式，這裡的旋轉會影響下面時針分針的旋轉，所以這裡我們加上.gave();用來儲存當前的狀態，再在函式的末尾加上.restore();用來返回到之前儲存的狀態，這樣就不會對後面的樣式產生影響。

            function drawhour(hour,min){
                gj.save();
                var rad = 2*Math.PI/12*hour;
                var radmin = 2*Math.PI/12/60*min;
                gj.rotate(rad+radmin);                                                 
                gj.beginPath();
                gj.moveTo(-2,10);
                gj.lineTo(2,10);
                gj.lineTo(0,-r/2);
                gj.lineTo(-2,10);
                gj.closePath();
                gj.fillStyle="brown"
                gj.fill();
                gj.restore();

　　分針、秒針的繪製如同時針的繪製，只是在樣式上有所改變。值得注意的是，時鐘上分針的位置會相應影響時針的位置，秒針的位置也會相應影響分針的位置。這裡我們給時針、分針函式相應添加了兩個引數，經過換算得到雙重影響下時針分針應該停留的位置。

//            繪製分針
            function drawmin(min,sec){
                gj.save();
                var rad = 2*Math.PI/60*min;
                var radsec = 2*Math.PI/60/60*sec;
                gj.rotate(rad+radsec);
                gj.beginPath();
                gj.moveTo(-2,10);
                gj.lineTo(2,10);
                gj.lineTo(0,-2*r/3);
                gj.lineTo(-2,10);
                gj.closePath();
                gj.fillStyle="burlywood"
                gj.fill();
                gj.restore();
            }
//            繪製秒針
            function drawsec(sec){
                gj.save();
                var rad = 2*Math.PI/60*sec;
                gj.rotate(rad);
                gj.beginPath();
                gj.moveTo(-2,10);
                gj.lineTo(2,10);
                gj.lineTo(0,-5*r/6);
                gj.lineTo(-2,10);
                gj.closePath();
                gj.fillStyle="coral"
                gj.fill();
                gj.restore();
            }

　　隨後設定定時器並完善函式呼叫：用new Date();來得到當前時間然後逐步獲取相應的時、分、秒，然後呼叫之前所寫函式，將得到的時、分、秒已引數的形式傳給函式，然後得到我們想要的結果。值得注意的是，定時器每一次執行都得先清除畫布，消除上一秒會出的時分秒針，而且將原點設定到中心點的操作記得寫在函式外面或者用儲存返回的方式使它回到初始狀態，否則每一次執行都會以已經定義好的原點在重新定義原點。

            function time(){
                var t=new Date();
                var hour=t.getHours();
                var min=t.getMinutes();
                var sec=t.getSeconds();

                drawhour(hour,min);
                drawmin(min,sec);
                drawsec(sec);

最後完成時鐘的製作，如果想使自己畫出的時鐘更好看，不妨發揮想象力嘗試各種樣式來修飾它。