如果你不多说，看看代码：






绘制刻度盘



您的浏览器不支持画布。


VaR箱= document.getelementbyid（'box）；
VaR CXT = box.getcontext（二维的）；
时钟/移动
var定时器= null；
函数时钟（）{
日期=新日期（）；
var H = date.gethours（）；
h＝H 60；
H = H > 12 12：H；
var m = date.getminutes（）；
var = date.getseconds（）；
清除画布
（00500500）cxt.clearrect；
绘制/拨号
cxt.strokestyle =# f0f；
cxt.linewidth = 6；
Cxt.beginPath（）；
Cxt.arc（250250100,0,2 *数学。PI）；
Cxt.stroke（）；
绘制/时钟
对于（var i = 0；i < 12；i + +）{
Cxt.save（）；
（250250）cxt.translate；
cxt.rotate（30 *我*数学。π/ 180）；
cxt.linewidth = 3；
Cxt.beginPath（）；
Cxt.moveTo（0 - 80）；
Cxt.lineTo（0 - 92）；
Cxt.stroke（）；
Cxt.restore（）；
}
绘制/分钟刻度
对于（var i = 0；i < 60；i + +）{
Cxt.save（）；
（250250）cxt.translate；
cxt.rotate（6 *我*数学。π/ 180）；
cxt.linewidth = 2；
Cxt.beginPath（）；
Cxt.moveTo（0 - 86）；
Cxt.lineTo（0 - 92）；
Cxt.stroke（）；
Cxt.restore（）；
}
顺时针方向画
Cxt.save（）；
cxt.linewidth = 5；
（250250）cxt.translate；
cxt.rotate（H * 30 *数学。π/ 180）；
Cxt.beginPath（）；
Cxt.moveTo（0,6）；
Cxt.lineTo（0 - 40）；
Cxt.stroke（）；
Cxt.restore（）；
绘制/分钟
Cxt.save（）；
cxt.linewidth = 3；
（250250）cxt.translate；
cxt.rotate（m×6×数学。π/ 180）；
Cxt.beginPath（）；
Cxt.moveTo（0.8）；
Cxt.lineTo（0 - 60）；
Cxt.stroke（）；
Cxt.restore（）；
第二手{绘画}
Cxt.save（）；
cxt.linewidth = 1；
（250250）cxt.translate；
cxt.rotate（S×6×数学。π/ 180）；
Cxt.beginPath（）；
Cxt.moveTo（0）；
Cxt.lineTo（0 - 75）；
Cxt.stroke（）；
Cxt.restore（）；
三轮拉伸/中心固定针
Cxt.save（）；
Cxt.beginPath（）；
cxt.fillstyle =# 0f0；
cxt.linewidth = 2；
（250250）cxt.translate；
Cxt.arc（0,0,20360，假）；
Cxt.stroke（）；
Cxt.fill（）；
Cxt.restore（）；
第二手花园
Cxt.save（）；
cxt.fillstyle =# F00；
cxt.linewidth = 2；
（250250）cxt.translate；
cxt.rotate（S×6×数学。π/ 180）；
Cxt.beginPath（）；
Cxt.arc（0，- 60,20360，假）；
Cxt.stroke（）；
Cxt.fill（）；
Cxt.restore（）；
}
时钟（）；
定时器= setInterval（时钟，1000）；






以上是本文的全部内容，希望本文的内容能给大家的学习或工作带来一定的帮助，同时也希望能给予更多的支持！