下面展示的是需求任务中需要实现的一个动态的百分比进度条，接着我尝试使用canvas进行简单的绘制了一下。
图1.png
1、模板文件：
首先定义一个模板文件，#canvas给画布做上标识，宽高设置也是由自己动态的决定。
<canvas #canvas width="400" height="120"></canvas>
2、开始绘制：
首先通过标识获取canvas画布DOM元素
@ViewChild("canvas", { static: true }) canvas: any; //获取DOM元素
封装一个方法drawGraphics，参数传入的是接口返回的百分占比，已经进行前期的准备工作处理，在绘制canvas时，不能将值写的太死，那样失去了灵活性，可以通过定义圆心位置(radius_x, radius_y)以及圆心半径radius来灵活绘制。
var c = this.canvas.nativeElement; // 获取到的canvas标识的元素
const width = c.width, height = c.height; // canvas的宽高
const radius = 40, radius_x = 50, radius_y = height / 2; //外环圆的半径以及坐标
var ctx=c.getContext("2d");
由于是动态的展示，因此需要在接口传一次过来后，前端画布需要清除一次再进行重新绘制。
// 每次重绘前清除一次画布
this.clearDraw(ctx, width, height);
// 清除canvas画布
clearDraw(context, width, height) {
context.clearRect(0, 0, width, height);
}
开始使用canvas绘制外圆环以及内圆环，虚线绘制圆环等
// 外层大圆
ctx.beginPath();
ctx.arc(radius_x,radius_y,radius,0.25*Math.PI,1.75*Math.PI); // x,y,r,起始角度,终点角度
ctx.strokeStyle= '#488E87';
ctx.stroke();
// 内层小圆
ctx.beginPath();
ctx.arc(radius_x,radius_y,radius - 7,0*Math.PI,2*Math.PI);
ctx.strokeStyle = '#70D4CA';
ctx.stroke();
// 虚线圆环
this.drawDashRound(ctx, radius_x, radius_y, radius - 10);
// 最内层小圆
ctx.beginPath();
ctx.arc(radius_x,radius_y,radius - 14,0*Math.PI,2*Math.PI);
ctx.strokeStyle = '#488E87';
ctx.font = "normal 16px '字体','字体','微软雅黑','宋体'"; //设置字体
ctx.textBaseline = 'middle';
ctx.fillText(percent.toFixed(1)*100+'%', radius_x / 2 + 5, radius_y);
ctx.stroke();
虚线圆环在canvas中没有明确的api使用，因此需要手动的去计算，通过绘制弧长的方式绘制虚线圆
// 绘制虚线圆环
drawDashRound(context, x, y, radius, step = 5) {
const count = Math.floor(360 / step);
step = step / 180 * Math.PI * 2;
for (let start = 0, e = step / 2; e <= 360; start += step, e += step) {
context.beginPath()
context.arc(x, y, radius, start, e);
context.stroke();
}
}
上下的直线以及折现可以直接使用api中的moveTo以及lineTo去绘制。
// 最上层的直线条
ctx.beginPath();
ctx.moveTo(radius_x + this.sqrt((radius*radius/2)),(height / 2) - this.sqrt((radius*radius/2)));
ctx.lineTo(radius_x + this.sqrt((radius*radius/2)) + 200,(height / 2) - this.sqrt((radius*radius/2)));
ctx.strokeStyle = '#488E87';
ctx.lineWidth = 1;
ctx.font = "normal 18px '字体','字体','微软雅黑','宋体'"; //设置字体
ctx.textBaseline = 'bottom';
ctx.fillText('盘库总进度', radius_x + this.sqrt((radius*radius/2)) + 100 ,(height / 2) - this.sqrt((radius*radius/2)));
ctx.closePath();
ctx.stroke();
// 末端实心圆
ctx.beginPath();
ctx.arc(radius_x + this.sqrt((radius*radius/2)) + 200, (height / 2) - this.sqrt((radius*radius/2)), 3, 0*Math.PI,2*Math.PI);
ctx.fillStyle = '#70D4CA';
ctx.fill();
ctx.stroke();
// 下层折线
ctx.beginPath();
ctx.moveTo(radius_x + this.sqrt((radius*radius/2)), (height / 2) + this.sqrt((radius*radius/2)));
ctx.lineTo(radius_x + this.sqrt((radius*radius/2)) + 50, (height / 2) + this.sqrt((radius*radius/2)));
ctx.strokeStyle = '#488E87';
ctx.lineWidth = 1;
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(radius_x + this.sqrt((radius*radius/2)) + 50, (height / 2) + this.sqrt((radius*radius/2)));
ctx.lineTo(radius_x + this.sqrt((radius*radius/2)) + 60, (height / 2) + this.sqrt((radius*radius/2)) - 10);
ctx.strokeStyle = '#488E87';
ctx.lineWidth = 1;
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(radius_x + this.sqrt((radius*radius/2)) + 60, (height / 2) + this.sqrt((radius*radius/2)) - 10);
ctx.lineTo(width, (height / 2) + this.sqrt((radius*radius/2)) - 10);
ctx.strokeStyle = '#488E87';
ctx.lineWidth = 1;
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(width, (height / 2) + this.sqrt((radius*radius/2)) - 10);
ctx.lineTo(width, (height / 2) + this.sqrt((radius*radius/2)) - 30);
ctx.strokeStyle = '#488E87';
ctx.lineWidth = 1;
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(width, (height / 2) + this.sqrt((radius*radius/2)) - 30);
ctx.lineTo(width - 15, (height / 2) + this.sqrt((radius*radius/2)) - 40);
ctx.strokeStyle = '#488E87';
ctx.lineWidth = 1;
ctx.closePath();
ctx.stroke();
// 末端实心圆
ctx.beginPath();
ctx.arc(width - 15, (height / 2) + this.sqrt((radius*radius/2)) - 40, 3, 0*Math.PI, 2*Math.PI);
ctx.fillStyle = '#70D4CA';
ctx.fill();
ctx.stroke();
在绘制折线以及直线的过程中，只需要理清楚不同的端点坐标进行计算即可。同时需要注意的是，这里需要使用平方根去计算一些数据。
图2.png
// 二分法求平方根
sqrt(num) {
function sqrtWrapper(min, max) {
let current = (min + max) / 2;
let _min = min, _max = max;
if (current * current > num) {
_max = current;
} else {
_min = current;
}
if (min === _min && max === _max) {
return current
} else if (_max - _min < (1 / new Array(17).fill(10).reduce((a, b) => a * b, 1))) {
return current;
} else {
return sqrtWrapper(_min, _max);
}
}
return sqrtWrapper(0, num);
}
接着，剩下中间的进度条实心块，这个的话就需要细心去计算了。
首先形参我通过传入完成的百分占比，canvas画布，进度条的起始x坐标，以及内部第一个小块左下角的x，y坐标。通过分成20个小块的进度条，进行动态绘制。
// 中间的进度条块
this.drawProcess(percent, ctx, radius_x , width - 50, radius_x - this.sqrt((radius*radius/2)) + 70, radius_y + 6);
// 绘制进度块,根据传入的百分比进行绘制
drawProcess(number, context, start, end, x, y) {
const len = end - start, // 总长度
count = len / 15;
// 开始绘制已完成的进度块
const effective = Math.floor(count * number);
// 根据长度绘制所有的进度块
for (let i = 0; i < count ; i++) {
context.beginPath();
context.lineTo(x, y);
context.lineTo(x+5,y-15);
context.lineTo(x+12,y-15);
context.lineTo(x+7,y);
context.closePath(); // 闭合图形
if (i < effective) {
context.fillStyle = '#2BFBE6';
}else {
context.fillStyle = '#196A88';
}
context.fill();
context.lineWidth = 1;
context.stroke();
x += 13;
}
}
3、实现效果：
图3.png
网友评论