持续为大家呈现云计算技术文章，欢迎大家关注！
作者：梁伟盛
据说本贵族圈每月不分享就邀请雪糕。。。所以分享下一个简单的Canvas插件
Canvas元素是HTML5的一部分，允许脚本语言动态渲染位图像，你可以使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。它也可用于创建图片特效和动画。（反正就是好东西） 既然是HTML5的特性，那必须是只有支持HTML5的浏览器才能使用，兼容性如下图：
使用到的API
beginPath
定义：开始一条路径，或重置当前的路径。
context.beginPath();复制代码
arc
定义：创建弧/曲线（用于创建圆或部分圆）。
context.arc(x, y , r, sAngle, eAngle, counterclockwise);复制代码
参数
- x：圆的中心的 x 坐标。
- y：圆的中心的 y 坐标。
- r：圆的半径。
- sAngle：起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
- eAngle：结束角，以弧度计。
- counterclockwise：可选。规定应该逆时针还是顺时针绘图。false = 顺时针，true = 逆时针。
stroke
定义：绘制当前路径的边框
context.stroke()复制代码
measureText
context.measureText(text).width;复制代码
定义：返回包含一个对象，该对象包含以像素计的指定字体宽度。
参数
- text：要测量的文本
fillText
定义：在画布上绘制填色的文本
context.fillText(text, x, y, maxWidth);复制代码
参数
- text：规定在画布上输出的文本。
- x：开始绘制文本的 x 坐标位置（相对于画布）。
- y：开始绘制文本的 y 坐标位置（相对于画布）。
- maxWidth：可选。允许的最大文本宽度，以像素计。
clearRect
定义：清空给定矩形内的指定像素。
context.clearRect(x, y, width, height);复制代码
参数
- x：要清除的矩形左上角的 x 坐标
- y：要清除的矩形左上角的 y 坐标
- width：要清除的矩形的宽度，以像素计
- height：要清除的矩形的高度，以像素计
实现思路
了解了以上API后，我们就可以动手干活了，其实很简单。实现只有3个步骤。
1，画出带有透明度的内圆
context.beginPath(); //设置透明度，样式与线条宽度 this.extend(context, { globalAlpha: inSideCircle.alpha, strokeStyle: inSideCircle.style, lineWidth: inSideCircle.lineWidth }) //绘制圆 context.arc(this.hElWidth, this.hElHeight, option.radius + outSideCircle.lineWidth - inSideCircle.lineWidth, 0, pi * 2, false); //画出圆形 context.stroke();复制代码 2，根据进度画出外圆
context.beginPath(); //设置透明度，样式与线条宽度 this.extend(context, { globalAlpha: outSideCircle.alpha, strokeStyle: outSideCircle.style, lineWidth: outSideCircle.lineWidth }) //根据当前进度绘制圆 context.arc(this.hElWidth, this.hElHeight, option.radius, -(pi / 2), pi * 2 / 100 * (n - 25), false); //画出圆形 context.stroke();复制代码 3，根据进度画出数值(0-100%)
context.beginPath(); this.extend(context, { font: textObj.font, fillStyle: textObj.style, globalAlpha: textObj.alpha }) //得出数值宽度 numberWidth = context.measureText(number).width; context.fillText(number, this.hElWidth - numberWidth / 2, this.hElHeight + 10 / 3)复制代码 #####最后暴露出setProgress设置进度函数给外部调用即可
//清除canvas内容 this.context.clearRect(0, 0, this.elWidth, this.elHeight); this._drawCircle(n); this._drawText(n);复制代码
测试用例
canvasProgress 复制代码
实现效果
背景与进度颜色根据喜好变换
最后
今天分享就到此位置了，有兴趣的可以去看下代码。
原文链接：
相关推荐
此文已由作者授权腾讯云技术社区发布，转载请注明
原文链接获取更多腾讯海量技术实践干货，欢迎大家前往