vue + canvas 实现炫酷时钟

栏目: Html5 · 发布时间: 5年前

内容简介:思路:思路:

如何基于canvas实现下图的样式

vue + canvas 实现炫酷时钟

demo演示地址: https://mirror198829.github.i...

canvas绘制步骤思路

  1. 绘制表盘的(时针)刻度
  2. 绘制表盘的(分针)刻度
  3. 绘制表盘数字刻度
  4. 绘制时针、分针、秒针
  5. 绘制中心点
  6. 绘制秒针的尾部(优化部分)

实现所需要的知识点

  • 画圆 ctx.arc(x,y,r,开始弧度,结束弧度)
  • 画线 ctx.moveTo(x,y) ctx.lineTo(x1,y1)
  • 直角坐标系的计算方法
    x = x0 + Math.cos(角度)*长度 y = y0 + Math.sin(角度)*长度
  • 定时器

如何实现(时针)刻度盘的绘制

思路:

  1. 已知直角坐标系的中心点坐标(x0,y0)即canvas画布中心点位置。设定L = 长度
  2. 计算出时针的角度,通过直角坐标系的计算方法便得出时针刻度的位置。 (12个刻度进行循环便可全部绘制)

计算时针角度的方法:

-90 + i * (360 / 12)

代码如下:

drawHoursScale(ctx, x0, y0, scaleNum, scaleW, maxL, minL) {
    for (let i = 0; i < scaleNum; i++) {
      let angel = -90 + i * (360 / scaleNum) //角度
      let [x1, y1] = [x0 + Math.cos(angel * Math.PI / 180) * maxL, y0 + Math.sin(angel * Math.PI / 180) * maxL]
      let [x2, y2] = [x0 + Math.cos(angel * Math.PI / 180) * minL, y0 + Math.sin(angel * Math.PI / 180) * minL]
      ctx.save()
      ctx.beginPath()
      ctx.lineWidth = scaleW
      ctx.lineCap = "round"
      ctx.moveTo(x1, y1)
      ctx.lineTo(x2, y2)
      ctx.stroke()
      ctx.closePath()
      ctx.restore()
    }
   }

如何绘制时针/分针/秒针

思路:

lineTo

如何计算终点坐标 与绘制刻度的思想式类似的

代码如下:

drawTimeNeedle(ctx, x0, y0, lineW, L, angel, color = '#000') {
    let [x, y] = [x0 + Math.cos(angel * Math.PI / 180) * L, y0 + Math.sin(angel * Math.PI / 180) * L]
    ctx.save()
    ctx.beginPath()
    ctx.strokeStyle = color
    ctx.lineWidth = lineW
    ctx.lineCap = "round"
    ctx.moveTo(x0, y0)
    ctx.lineTo(x, y)
    ctx.stroke()
    ctx.closePath()
    ctx.restore()
  },

说明事项

  1. 时钟样式 参考 http://www.jq22.com/jquery-in... (可惜下载代码要币,一不做二不休自己写)
  2. 源码地址: https://github.com/Mirror1988... (喜欢的,请给作者github小星星)
  3. demo演示地址: https://mirror198829.github.i...

以上所述就是小编给大家介绍的《vue + canvas 实现炫酷时钟》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

破茧成蝶:用户体验设计师的成长之路

破茧成蝶:用户体验设计师的成长之路

刘津、李月 / 人民邮电出版社 / 2014-7 / 69.00

市面上已经有很多专业的用户体验书籍,但解决用户体验设计师在职场中遇到的众多现实问题的图书并不多见。本书从用户体验设计师的角度出发,系统地介绍了其职业生涯中的学习方法、思维方式、工作流程等,覆盖了用户体验设计基础知识、设计师的角色和职业困惑、工作流程、需求分析、设计规划和设计标准、项目跟进和成果检验、设计师职业修养以及需要具备的意识等,力图帮助设计师解决在项目中遇到的一些常见问题,找到自己的职业成长......一起来看看 《破茧成蝶:用户体验设计师的成长之路》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

MD5 加密
MD5 加密

MD5 加密工具