HTML5技术

用HTML5的canvas做一个时钟 - 蜀北乔少恭(2)

字号+ 作者:H5之家 来源:博客园 2016-03-29 16:00 我要评论( )

这里有两个地方需要说一下:1、在我们获得当前时间的的毫秒数,然后转换为小时的时候,对24取模计算出当天的小时数的时候,这里需要加上8。2、如果想要使用lineCap这个属性吗,那么上面在设置路径的时候,不要用clo

这里有两个地方需要说一下:1、在我们获得当前时间的的毫秒数,然后转换为小时的时候,对24取模计算出当天的小时数的时候,这里需要加上8。2、如果想要使用lineCap这个属性吗,那么上面在设置路径的时候,不要用closePath()。

到了这里我们还需要一个来绘制指针的方法,并且让指针看起来能够转动:

function draw(){ cntH.clearRect(0,0,needles.width,needles.height); var mzneedle=new clockNeedle(cntH,200,1,'rgba(0,0,0,.5)','round',2); fzneedle=new clockNeedle(cntH,80,3,'rgba(0,0,0,.4)','round',0); var szneedle=new clockNeedle(cntH,140,2,'rgba(0,0,0,.3)','round',1); mzneedle.drawNeedle(); fzneedle.drawNeedle(); szneedle.drawNeedle(); cntH.arc(200,200,5,0,2*Math.PI); cntH.fillStyle='rgba(0,0,0,.5)'; cntH.fill(); } setInterval(draw,1);

下面附上该时钟的图片:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    2017-05-02 11:02

  • Dora.Interception: 一个为.NET Core度身定制的AOP框架 - Artech

    Dora.Interception: 一个为.NET Core度身定制的AOP框架 - Artech

    2017-05-02 11:00

  • 【Vue 入门】使用 Vue2 开发一个展示项目列表的应用 - zhangjk

    【Vue 入门】使用 Vue2 开发一个展示项目列表的应用 - zhangjk

    2017-04-30 16:00

  • HTML5 进阶系列:indexedDB 数据库 - _林鑫

    HTML5 进阶系列:indexedDB 数据库 - _林鑫

    2017-04-27 14:02

网友点评
t