canvas制作主题可配置化,可拖拽时钟

最近学习了canvas之后,就用canvas制作了一个主题可配置化,可拖拽时钟。话不多说,直接看效果图:



具体的实现思路也很简单:首先绘制表盘,其次绘制时针分针秒针,然后获取时间进行渲染,最后用定时器每秒绘制一次即可。为了实现主题可配置,对外暴露构造函数,构造函数的参数为可配置化对象。至于拖拽效果,给时钟注册对应的事件监听就好了。

  • 主要用到的方法:
fillText(element, x, y);   //在指定位置绘制文本
arc(x, y, r, 0, 2 * Math.PI); //绘制圆
fill()           //填充路径
stroke()         //绘制路径
save()           //保存当前环境的状态
restore()        //返回之前保存过的路径状态和属性
rotate(angle)    //旋转当前的绘图。 
translate(x,y)   //重新映射画布上的 (0,0) 位置。   
  • 要点:
    • translate(width / 2, height / 2) 使canvas的(0,0) 位置为canvas的中心。
    • fillText(element, x, y) 绘制表盘上的数字时,如何确定它的位置x,y。
      x= Math.cos(rad) * r; y=Math.sin(rad) * r
    • rotate(angle) 其实指针并没有转动,转动的是canvas画布。
    • save() restore() 绘制之前保存当前环境状态,绘制之后返回之前保存过的环境。

具体的实现代码已上传至GitHub,有兴趣的可以去源码,github地址
大家的平时工作中如果需要用到的话,可以使用我的Clock插件,插件的使用方法详见使用说明
欢迎大家指出不足,共同进步。

推荐阅读更多精彩内容

  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 2,002评论 4 28
  • Cnavas绘制时钟 背景图的绘制(大圆、数字、小圆点),掌握基础知识:圆的绘制(arc方法),关于圆的弧度的计算...
    Iris_mao阅读 1,698评论 8 26
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 1,550评论 4 37
  • 书中代码示例效果展示:Core HTML5 Canvas Examples 基础知识 canvas元素 canva...
    szu_bee阅读 1,430评论 2 29
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    J_L_L阅读 566评论 0 4