Angular框架下通过canvas画布实现需求任务图中的动态进

下面展示的是需求任务中需要实现的一个动态的百分比进度条，接着我尝试使用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