Html+JavaScript 在canvas上绘制带日期显示的时钟 (自己绘制刻度)

       此为博主在研究参考多个时钟代码后，自己总结创新编写的一个简洁齐全又美观的时钟，本着自己获益也回馈大众地分享出来，如有问题或更好的建议欢迎与我交流。      

首先创建一个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.p