這個時鐘是將鐘盤的圓心點移到了 canvas 畫布中心點。以方便後面的方位計算

ctx.translate(width/2,height/2);

現定義一個圓盤來顯出這個時鐘的基本位置

ctx.save()
                ctx.beginPath();
                ctx.arc(0,0,r+90,0,2*Math.PI,false);
                ctx.lineWidth = 200;
                ctx.closePath();
                ctx.drawImage(img,-r,-r,width,height);
                
 
var grd = ctx.createLinearGradient(0,0,0,r);
                var r1 = Math.floor(Math.random()*256);19:48:19
                var g1 = Math.floor(Math.random()*256);
                var b1 = Math.floor(Math.random()*256);
                grd.addColorStop(0,"rgb(" + r0 + "," + g0 + "," + b0 + ")");
                grd.addColorStop(
 
1,"rgb(" + r1 + "," + g1 + "," + b1 + ")");
                ctx.strokeStyle = grd; 
                ctx.stroke();

我在這裡面添加了線性漸變來改變顏色，如果感覺顏色太過絢麗可以註釋掉不寫。

 var grd1 = ctx.createLinearGradient(0,0,0,r);
                    var r3 = Math.floor(Math.random()*256);
                    var g3 = Math.floor(Math.random()*256);
                    var b3 = Math.floor(Math.random()*256);
                    grd1.addColorStop(0,"rgb(" + r0 + "," + g0 + "," + b0 + ")");
                    grd1.addColorStop(1,"rgb(" + r3 + "," + g3 + "," + b3 + ")");

然後利用到了三角函式原理來計算出鐘錶中刻度的位置；

var x = Math.cos(Math.PI/6*i)*(r-30);
var y = Math.sin(Math.PI/6*i)*(r-30);

然後通過計算來顯示出時刻和刻度的分佈位置

//                              時刻
                
                ctx.beginPath();
                var arr = ["III","IV","V","VI","VII",'VIII',"IX",'X','XI','XII','I','II'];
                ctx.font = "20px Arial";
                ctx.textAlign = "center";
                ctx.textBaseline = "middle";
                var grd2 = ctx.createLinearGradient(0,0,0,r);
                var r2 = Math.floor(Math.random()*256);
                var g2 = Math.floor(Math.random()*256);
                var b2 = Math.floor(Math.random()*256);
                grd2.addColorStop(0,"rgb(" + r2 + "," + g2 + "," + b2 + ")");
                grd2.addColorStop(1,"rgb(" + r0 + "," + g0 + "," + b0 + ")");
                ctx.fillStyle = grd2;
                ctx.fill();
                ctx.closePath();
                for (var i = 0;i < arr.length; i ++){
                    var x = Math.cos(Math.PI/6*i)*(r-30);
                    var y = Math.sin(Math.PI/6*i)*(r-30);
                    ctx.fillText(arr[i],x,y);
                }
                
//                刻度
                for(var j =0;j < 60;j ++){
                    var x = Math.cos(Math.PI/30*j)*(r-15);
                    var y = Math.sin(Math.PI/30*j)*(r-15);
                    ctx.beginPath();
                    ctx.arc(x,y,2,0,2*Math.PI,false);
                    var grd1 = ctx.createLinearGradient(0,0,0,r);
                    var r3 = Math.floor(Math.random()*256);
                    var g3 = Math.floor(Math.random()*256);
                    var b3 = Math.floor(Math.random()*256);
                    grd1.addColorStop(0,"rgb(" + r0 + "," + g0 + "," + b0 + ")");
                    grd1.addColorStop(1,"rgb(" + r3 + "," + g3 + "," + b3 + ")");
                    ctx.fillStyle = grd1;
                    ctx.fill();
                }
                ctx.closePath();
            }

接下來就是時針、分針和秒針
在這裡值得一提的是，秒針在移動的時候是帶著分針和時針一起轉動的，所以在計算時針的轉動角度時，要把分針的也計算在一起，不過分針的計算角度要更新下

var HOUR = Math.PI/6*hour;
var MINU = Math.PI/6/60*minu;

同樣的在計算分針時，要帶上秒針

var MINU = Math.PI/30*minu;
var SECON = Math.PI/1800*secon;

這樣，我們在執行時，就可以看出，分針和時針都是不停的在運轉的

//                     小時
            function timh(hour,minu){
                ctx.save();
                ctx.beginPath();
                ctx.lineWidth = 6;
                var HOUR = Math.PI/6*hour;
                var MINU = Math.PI/6/60*minu;
                ctx.rotate(HOUR+MINU);
                ctx.moveTo(0,10);
                ctx.lineTo(0,-r/2);
                ctx.lineCap = "round";
                var grd3 = ctx.createLinearGradient(0,0,0,r);
                var r3 = Math.floor(Math.random()*256);
                var g3 = Math.floor(Math.random()*256);
                var b3 = Math.floor(Math.random()*256);
                grd3.addColorStop(0,"rgb(" + r3 + "," + g3 + "," + b3 + ")");
                grd3.addColorStop(1,"rgb(" + r0 + "," + g0 + "," + b0 + ")");
                ctx.strokeStyle = grd3;
                ctx.stroke();
                ctx.restore();
            }
            
//            分鐘
            function timm(minu,secon){
                ctx.save();
                ctx.beginPath();
                ctx.lineWidth = 3;
                var MINU = Math.PI/30*minu;
                var SECON = Math.PI/1800*secon;
                ctx.rotate(MINU+SECON);
                ctx.moveTo(0,10);
                ctx.lineTo(0,-r+50);
                ctx.lineCap = "round";
                var grd4 = ctx.createLinearGradient(0,0,0,r);
                var r4 = Math.floor(Math.random()*256);
                var g4 = Math.floor(Math.random()*256);
                var b4 = Math.floor(Math.random()*256);
                grd4.addColorStop(0,"rgb(" + r4 + "," + g4 + "," + b4 + ")");
                grd4.addColorStop(1,"rgb(" + r0 + "," + g0 + "," + b0 + ")");
                ctx.strokeStyle = grd4;
                ctx.stroke();
                ctx.restore();
            }
            
//            秒鐘
            function tims(secon){
                ctx.save();
                ctx.beginPath();
                var SECON = Math.PI/30*secon;
                ctx.rotate(SECON);
                ctx.fillStyle = "red"
                ctx.moveTo(-2,20);
                ctx.lineTo(2,20);
                ctx.lineTo(1,-r+20);
                ctx.lineTo(-1,-r+20);
                ctx.closePath();
                ctx.fill();
                ctx.restore();
            }

在最後為了真實一點，在鐘盤中心增加一個固定

function ding(){
                ctx.beginPath();
                ctx.fillStyle = "#fff";
                ctx.arc(0,0,3,0,Math.PI*2);
                ctx.closePath();
                ctx.fill();
            }

最後在新增無限定時器運轉

function cleann(){
                ctx.clearRect(-r,-r,width,height);
                var timer = new Date();
                var hour = timer.getHours();
                var minu = timer.getMinutes();
                var secon = timer.getSeconds();
                
                fun();
                timh(hour,minu);
                timm(minu,secon);
                tims(secon);
                ding();
                ctx.restore();
            }setInterval(cleann,1000);

效果（背景圖片可以自行加入）