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