Canvas实现自定义进度条效果

Canvas-进度条效果.gif

代码地址：gitee.com/zyjun/progr…

一、使用Canvas实现原理

最重要的是一步一步的调试，最终实现自己想要的效果。

• 绘制图形部分逻辑

  painting() {
    //重置坐标系及相关配置
    this.ctx.restore()
    this.ctx.clearRect(0, 0, this.canvasInfo.width, this.canvasInfo.height)
    this.outViews = new OutViews({...this}).paint()
    this.innerLines = new InnerLines({...this}, this.circleRadio - 20 * this.rem).paint()
    this.innerProgress = new InnerProgress({...this}, this.circleRadio - 40 * this.rem).paint(this.value)
    this.innerText = new InnerText({...this}).paint(this.value)
  }
  

• 因为每个部分的绘制工作都不少，就将图形分为以下几部分
  • 1.最外圈的点、线、点弧线OutViews
  • 2.里面的带背景的线框InnerLines
  • 3.圆弧进度条InnerProgress
  • 4.百分比值及正确率文本InnerText
• 为canvas添加mousemove事件监听

  addMapEvent() {
    this.canvas.addEventListener('mousemove', ev => {
      console.log("mousemove")
      const currentX = ev.offsetX, currentY = ev.offsetY
      let isIn = this.innerLines.isPointIn(currentX, currentY)
      this.border = isIn ? 1.2 : 1
      if (isIn) this.addTimer()
      else this.removeTimer()
    })
  }
  

  • 如果鼠标在内圈线框InnerLines内，如果在线框内则设置所有线条加宽， 并添加timer更新rotate值完成旋转效果；否则移除timer去掉旋转效果。

    addTimer() {
      this.removeTimer()
      this.timer = setInterval(() => {
        this.rotate += 5
        this.painting()
      }, 100)
    }
    

页面实现整体效果：