通过H5的新标签canvas做出一个时钟的全过程，希望对初学者有帮助(2)_H5之家

canvas教程

通过H5的新标签canvas做出一个时钟的全过程，希望对初学者有帮助(2)

字号+ 作者：H5之家来源：H5之家 2017-09-09 16:03 我要评论( )

myContext.save();myContext.beginPath();myContext.translate( 300,300 );myContext.rotate(h + m/60);myContext.moveTo(0,0 );myContext.lineTo( 0,-120 );myContext.strokeStyle = "#ffffff" ;myContext.lineWid

myContext.save(); myContext.beginPath(); myContext.translate(300,300); myContext.rotate(h + m/60); myContext.moveTo(0,0); myContext.lineTo(0,-120); myContext.strokeStyle = "#ffffff"; myContext.lineWidth = 6; myContext.stroke(); myContext.closePath(); myContext.restore();

给中间加一个方块

myContext.save(); myContext.beginPath(); myContext.fillStyle="#ffffff"; myContext.fillRect(290,290,20,20); myContext.closePath(); myContext.restore();

最后要让这个时钟自己转动起来

setTimeout(arguments.callee,1000);

好了，到这里就完成了，是不是感觉很简答，你还在等什么，赶快动手制作一个炫酷的时钟吧。