项目中需要一个请求进度效果，尝试了下自己用 canvas 来绘制一个环形进度条，动效直接用的休眠函数加随机数来模拟。用到了 es6 里的 class 类，用单例模式的懒汉模式来实例化对象，不像 Java 这种纯面向对象的语言，写着还是有点别扭。

1.png

import NP from 'number-precision'

/**
 * 休眠函数
 * @param {Number} wait
 */
function sleep(wait) {
  return new Promise((resolve) => {
    setTimeout(resolve, wait)
  })
}

export default class CanvasProgress {
  constructor({ elementId, height = 200, width = 200 }) {
    if (elementId) {
      this.canvas = document.getElementById(elementId) // canvas 节点
      this.canvas.height = height
      this.canvas.width = width
      this.elementId = elementId
      this.height = height
      this.width = width
      this.cxt = canvas.getContext('2d') // 绘图上下文
    }

    // this.instance = null
    this.reset()
  }

  /**
   * 设置进度
   * @param {boolean} value
   */
  setStep(value) {
    this.step = value
  }

    /**
   * 设置是否暂停
   * @param {boolean} value
   */
  setIsPause(value) {
    this.isPause = value
  }

  /**
   * 设置是否结束
   * @param {boolean} value
   */
  setIsEnd(value) {
    this.isEnd = value
  }

  /**
   * 重置
   */
  reset() {
    this.setStep(0)
    this.setIsPause(false)
    this.setIsEnd(false)
  }

  /**
   * 获取实例，单例模式
   * @param {Object} config
   * @returns {CanvasProgress} 实例对象
   */
  static getInstance(config) {
    const { elementId, height, width } = config

    // 这里比较要用 instance 实例，不能直接用 this
    const ins = this.instance
    if (!ins || (ins && (elementId !== ins.elementId || height !== ins.height || width !== ins.width))) {
      this.instance = new CanvasProgress(config)
    }
    return this.instance
  }

  /**
   * 初始化
   * @param {string} e 初始化类型：restart-重启
   */
  async init(e) {
    const restart = e === 'restart'
    let isStarted = false // 是否已经开启了
    let isPaused = false // 是否已经暂停了

    if (!restart) {
      isStarted = this.step > 0
      isPaused = this.isPause || this.step === 100
      this.reset()
    }

    this.start({ isStarted, isPaused })
  }

  /**
   * 开启
   * @param {boolean} param.isStarted 是否已经开启，若开启了只用修改 step 数据，继续使用开启的 while 循环
   * @param {boolean} param.isPaused 是否已经暂停，若暂停了需重新开启 while 循环
   */
  async start({ isStarted, isPaused } = {}) {
    while( this.step < 100) {
      if (this.isPause) return
      if (isStarted) {
        if (isPaused) this.start() // 暂停了的要重新开启个循环
        return
      }

      if (this.isEnd) {
        await sleep(50)

        this.step = parseInt(this.step)
        if (this.step < 100) {
          this.step++
        }
        this.draw()
        continue
        // return
      }

      // 生成 1-9之间的随机数
      const random = Math.round(Math.random() * 8) + 1
      const num = NP.divide(random, Math.pow(10, random))

      if (this.step < 80) {
        await sleep(100)
        this.step = NP.plus(this.step, (random > 5 ? random - 5 : random))
      } else if (this.step >= 80 && this.step < 99.98) {
        await sleep(10 * random)
        this.step = NP.plus(this.step, num).toFixed(2)
      } else {
        // 接口还没返回数据要处理下，否则无限死循环会内存溢出
        // await sleep(1000)
        // continue
        // 直接 return 或暂停了，成功时再重启
        this.pause()
      }

      // 大于100时修正
      if (this.step > 100) this.step = 100
      this.draw()
    }
  }

  /**
   * 暂停
   */
  pause() {
    this.setIsPause(true)
  }

  /**
   * 重启
   */
  restart() {
    this.setIsPause(false)
    this.init('restart')
  }

  /**
   * 结束
   */
  end() {
    this.setIsEnd(true)
    if (this.isPause) this.restart()
  }

  /**
   * 绘图
   */
  draw() {
    this.clearRect()

    const x = this.width / 2
    const y = this.height / 2

    // 灰色背景
    this.cxt.beginPath()
    this. cxt.moveTo(x, y)
    this.cxt.arc(x, y, x, 0, Math.PI * 2)
    this.cxt.fillStyle='#ddd'
    this.cxt.fill()
    this.cxt.closePath()

    // 进度
    this.cxt.beginPath()
    this.cxt.moveTo(100,100)
    // arc(圆的中心x坐标, 圆的中心y坐标, 圆半径, 起始角, 结束角[, 逆/顺时针])
    this.cxt.arc(x, y, x, -Math.PI * 0.5, Math.PI * 2 * this.step / 100 - Math.PI * 0.5, false)
    this.cxt.fillStyle='#57bc78'
    this.cxt.fill()
    this.cxt.closePath()

    // 顶层中间白色圆圈遮挡
    this.cxt.beginPath()
    this.cxt.moveTo(x, y)
    this.cxt.arc(x, y, 80, 0, Math.PI * 2)
    this.cxt.fillStyle="#fff"
    this.cxt.fill()
    this.cxt.closePath()

    // 文字
    this.cxt.textAlign = 'center'
    this.cxt.fillStyle='#57bc78'
    this.cxt.textBaseline = 'middle'
    this.cxt.font = 'bold 24px Arial'
    this.cxt.fillText(this.step + '%', x, y)
  }

  /**
   * 清除绘图区域
   */
  clearRect() {
    this.cxt.clearRect(0, 0, this.width, this.height)
  }

  /**
   * 保存图片
   */
  saveImg() {
    const url = this.canvas.toDataURL()
    let a = document.createElement('a')
    a.setAttribute('href', url)
    a.setAttribute('download', 'img.png')
    a.setAttribute('target', '_blank')
    document.body.appendChild(a)
    a.dispatchEvent(new MouseEvent('click'))
    document.body.removeChild(a)
  }
}