做一个web app,想在第一次或者更新的时候,有一个更新进度条,我个人比较喜欢圆的那种。
canvas + svg高低配,应该还不错的。顺便一提,canvas用来压缩图片也是么么哒的。
先看下效果图,我咋觉得边有点虚。基本的样子有了,但是美观,美观,我要美观,下次再来。
原理就是绘制圆和文本绘制。
特别说明:
1. 会自动计算canvas的宽高,取最大值,并重设宽高为最大值
2. 有简单的计算逻辑,让 百分比的文本居中
3. 超大的边宽会被限制
上代码。
class CanvasProgress {
constructor(cv, options = {
bgColor: '#123456',
cBgColor: 'green',
edgeWidth: 20
}) {
if (!cv || !cv.getContext) {
throw new Error('参数cv为空或者getContext方法未定义')
}
this._ctx = cv.getContext('2d')
this._diameter = this._getDiameter(cv) //直径
this._radius = Math.ceil(this._diameter / 2) //半径
this._options = Object.assign({
bgColor: '#123456', //未加载的背景色
cBgColor: 'green', //已加载的背景色
edgeWidth: 20, //边款
textMaxWidth: this._radius //进度文本最大长度
}, options)
this._options.edgeWidth = Math.min(this._radius * 0.28, this._options.edgeWidth) //重新计算
this._circleParams = {
x: this._radius,//圆心的x轴坐标值
y: this._radius,//圆心的y轴坐标值
r: Math.floor(this._radius - this._options.edgeWidth / 2 - 1) //圆的半径
}
this._resizeCanvas(cv) //调整canvas宽高一致
this._initialize() //绘制背景圆
}
/**
* 通过canvas获得直径
* @param {*canvas对象} cv
*/
_getDiameter(cv) {
return Math.max(cv.height || 0, cv.width || 0) || 200
}
/**
* 进度转换角度
* @param {*进度} progress
*/
_getAngle(progress) {
return (progress / 100) * Math.PI * 2
}
_resizeCanvas(cvProgress) {
cvProgress.width = cvProgress.height = this._diameter
}
/**
* 调整canvas宽高一致
*/
_initialize() {
let ctx = this._ctx
// 开始一个新的绘制路径
ctx.beginPath()
//设置弧线的颜色为蓝色
ctx.strokeStyle = this._options.bgColor
ctx.lineWidth = this._options.edgeWidth
//以canvas中的坐标点(100,100)为圆心,绘制一个半径为50px的圆形
ctx.arc(this._circleParams.x, this._circleParams.y, this._circleParams.r, 0, Math.PI * 2, false)
//按照指定的路径绘制弧线
ctx.stroke()
}
/**
* 更近进度
* @param {*进度 0-100} progressValue
* @param {*绘制圆的设置} circleSettings
* @param {*绘制文本的设置} progressTextSettings
*/
updateProgress(progressValue, circleSettings, progressTextSettings) {
if (progressValue <= 0) {
return
}
this._updateCircle(progressValue, circleSettings)
this._updateProgressText(progressValue, progressTextSettings)
}
/**
* 绘制圆
* @param {*进度} progressValue
* @param {*设置} settings
*/
_updateCircle(progressValue, settings) {
let ctx = this._ctx
ctx.beginPath()
let angle = this._getAngle(progressValue)
ctx.strokeStyle = this._options.cBgColor
ctx.lineWidth = this._options.edgeWidth
if (settings) {
Object.keys(settings).forEach(k => {
ctx[k] = settings[k]
})
}
ctx.arc(this._circleParams.x, this._circleParams.y, this._circleParams.r, 0 + Math.PI * 1.5, angle + Math.PI * 1.5, false)
ctx.stroke()
}
/**
* 绘制进度文本
* @param {*进度} progressValue
* @param {*设置} settings
*/
_updateProgressText(progressValue, settings) {
if (progressValue < 0 || progressValue > 100) {
return
}
let ctx = this._ctx,
r = this._radius,
fontSize = this._getFontSize(settings)
ctx.clearRect(r * 0.5, r * 0.5, r, r)
ctx.font = `${fontSize}px sans-serif`
ctx.fillStyle = this._getTextGradient()
if (settings) {
Object.keys(settings).forEach(k => {
ctx[k] = settings[k]
})
}
ctx.fillText(progressValue + '%', this._circleParams.x - this._options.textMaxWidth / 2, this._circleParams.y + fontSize / 2, this._options.textMaxWidth)
}
/**
* 渐变设置
*/
_getTextGradient() {
var gradient = this._ctx.createLinearGradient(0, 0, 100, 0);
gradient.addColorStop("0", "red");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "green");
return gradient
}
/**
* 获得当前文字大小
* @param {*设置} settings
*/
_getFontSize(settings) {
if (settings && settings.font) {
let matchItem = settings.font.match(/\d{1,2}/)
if (matchItem) {
return Number.parseInt(matchItem[0])
}
}
return this._radius * 0.6
}
}
调用代码:
<!DOCTYPE> <html> <head> <title> canvas 原型进度条</title> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta charset="utf-8"> </head> <body style="margin:5% 10% 0 10%"> <div> <canvas id="cvProgress" height="250" width="15"> </div> <script src="CanvasProgress.js"></script> </body> <script> let ps = new CanvasProgress(cvProgress, { edgeWidth: 50 }), progress = 0 let tickets = setInterval(function () { progress += 5 ps.updateProgress(progress,null,{ }) if (progress > 100) { clearInterval(tickets) } }, 100) </script> </html>
源码地址:https://github.com/xiangwenhu/BlogCodes/tree/master/client/canvas