用单例模式封装canvas环形进度条
我的项目中须要一个申请进度成果，尝试了下本人用 canvas 来绘制一个环形进度条，动效间接用的休眠函数加随机数来模仿。用到了 es6 里的 class 类，用单例模式的懒汉模式来实例化对象，不像 Java 这种纯面向对象的语言，写着还是有点顺当。
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) }}