基于canvas绘制边框环绕进度条

案例

如下图所示，我们想通过canvas来绘制一个环形的进度条，且封装成组件，让进度条能自适应宽高包裹元素，进度条的进度依据百分比进行渲染

思路

1. 父盒子设置相对定位
2. canvas画布基于父盒子绝对定位，设置其宽高百分比为父盒子100%
3. canvas画布首先绘制一个矩形边框，让其渲染出进度条底色
4. 设置定时器，依据时间流速，先后绘制上边框进度条、右边框进度条、下边框进度条、左边框进度条，每个进度条所耗时间占总时间的1/4
5. 进度条走完之后，清除定时器
6. 进度条封装成组件，以插槽形式包裹需要包裹的元素

完整代码

进度条组件BorderProgress

import React, { Component, createRef } from 'react';
import './BorderProgress.less';



type StateType = {
  // borderProgressDomWidth: number;
  // borderProgressDomHeight: number;
  percent: string;
  [propName: string]: any;
};

type PropType = {
  time: number;
  pauseProgress?: boolean;
  isShowEndProgress?: boolean;
  canvasId: string;
  [propName: string]: any;
};

interface BorderProgress {
  state: StateType;
  props: PropType;
  borderProgressDom: any;
  progressInterval: any;
}

class BorderProgress extends Component {
  constructor(props: any) {
    super(props);
    this.state = {
      // borderProgressDomWidth: 0,
      // borderProgressDomHeight: 0,
      percent: '0%',
    };
    this.borderProgressDom = createRef();
    this.progressInterval = null;
  }

  componentDidMount() {
    // this.setState({
    //   borderProgressDomWidth: this.borderProgressDom.current.offsetWidth,
    //   borderProgressDomHeight: this.borderProgressDom.current.offsetHeight,
    // })
    if (!this.props.isShowEndProgress) {
      this.initBorderProgress();
    }
  }

  componentWillUnmount() {
    clearInterval(this.progressInterval);
  }

  componentDidUpdate() {
    if (this.props.pauseProgress === true) {
      clearInterval(this.progressInterval);
    }
  }

  private initBorderProgress = (): void => {
    let myCanvas: any = document.getElementById(this.props.canvasId);
    let ctx = myCanvas.getContext("2d");
    const myCanvasWidth = myCanvas.width; // canvas画布中能准确设置像素的宽度（依据dom真实宽度设置画布像素并不准确，不能有效占满画布）
    const myCanvasHeight = myCanvas.height; // canvas画布中能准确设置像素的高度（依据dom真实宽度设置画布像素并不准确，不能有效占满画布）
    console.log(myCanvasWidth, myCanvasHeight);
    const borderWidth = 10;
    // 先绘制画布原始边框矩形
    ctx.lineWidth=borderWidth; // 设置边框的线条宽度为8个像素
    ctx.strokeStyle="#333"; // 设置线条颜色
    ctx.rect(5, 5, myCanvasWidth-borderWidth, myCanvasHeight-borderWidth); // 设置边框所在坐标，是因为线条宽度也占据了像素，所以坐标x,y设置为线条宽度的一半，且矩形宽高需要减去线条宽度，这样才能让矩形沿着画布边缘，铺满画布
    ctx.stroke();
    this.startProgress(ctx, myCanvasWidth-borderWidth, myCanvasHeight-borderWidth, borderWidth);
  }

  private startProgress = (ctx: any, canSetWidth: number, canSetHeight: number, borderWidth: number): void => {
    clearInterval(this.progressInterval);
    let time = this.props.time;
    let timeCount = 0;
    let percent = `0%`;
    let topProgressBorderLength = 0;
    let rightProgressBorderLength = 0;
    let bottomProgressBorderLength = 0;
    let leftProgressBorderLength = 0;
    this.progressInterval = setInterval(() => {
      if (topProgressBorderLength < canSetWidth) { // 如果上边框小于当前canvas画布可设置宽度
        // 绘制矩形进度条top边框
        ctx.beginPath(); // 起始一条路径
        ctx.lineWidth = borderWidth; // 设置边框的线条宽度为8个像素
        ctx.strokeStyle = "#5A4CDB"; // 设置线条颜色
        ctx.lineCap = "round"; // 向线条的每个末端添加圆形线帽
        topProgressBorderLength += canSetWidth / (time * 1000 / 4 / 15);
        if (topProgressBorderLength >= canSetWidth) {
          topProgressBorderLength = canSetWidth;
        }
        ctx.moveTo(0, borderWidth/2);
        ctx.lineTo(topProgressBorderLength, borderWidth/2);
        ctx.stroke();
      }
      if (!(topProgressBorderLength < canSetWidth) && (rightProgressBorderLength < canSetHeight)) { // 如果上边框已经绘制完成，右边框小于当前canvas画布可设置高度
        // 绘制矩形进度条right边框
        ctx.beginPath(); // 起始一条路径
        ctx.lineWidth = borderWidth; // 设置边框的线条宽度为8个像素
        ctx.strokeStyle = "#5A4CDB"; // 设置线条颜色
        ctx.lineCap = "round"; // 向线条的每个末端添加圆形线帽
        rightProgressBorderLength += canSetHeight / (time * 1000 / 4 / 15);
        if (rightProgressBorderLength >= canSetHeight) {
          rightProgressBorderLength = canSetHeight;
        }
        ctx.moveTo(canSetWidth+(borderWidth/2), (borderWidth/2));
        ctx.lineTo(canSetWidth+(borderWidth/2), rightProgressBorderLength);
        ctx.stroke();
      }
      if (!(rightProgressBorderLength < canSetHeight) && (bottomProgressBorderLength < canSetWidth)) { // 如果右边框已经绘制完成，下边框小于当前canvas画布可设置宽度
        // 绘制矩形进度条bottom边框
        ctx.beginPath(); // 起始一条路径
        ctx.lineWidth = borderWidth; // 设置边框的线条宽度为8个像素
        ctx.strokeStyle = "#5A4CDB"; // 设置线条颜色
        ctx.lineCap = "round"; // 向线条的每个末端添加圆形线帽
        bottomProgressBorderLength += canSetWidth / (time * 1000 / 4 / 15);
        if (bottomProgressBorderLength >= canSetWidth) {
          bottomProgressBorderLength = canSetWidth;
        }
        ctx.moveTo(canSetWidth+(borderWidth/2), canSetHeight+(borderWidth/2));
        ctx.lineTo(canSetWidth+(borderWidth/2)-bottomProgressBorderLength, canSetHeight+(borderWidth/2));
        ctx.stroke();
      }
      if (!(bottomProgressBorderLength < canSetWidth) && (leftProgressBorderLength < canSetHeight)) { // 如果上边框已经绘制完成，右边框小于当前canvas画布可设置高度
        // 绘制矩形进度条right边框
        ctx.beginPath(); // 起始一条路径
        ctx.lineWidth = borderWidth; // 设置边框的线条宽度为8个像素
        ctx.strokeStyle = "#5A4CDB"; // 设置线条颜色
        ctx.lineCap = "round"; // 向线条的每个末端添加圆形线帽
        leftProgressBorderLength += canSetHeight / (time * 1000 / 4 / 15);
        if (leftProgressBorderLength >= canSetHeight) {
          leftProgressBorderLength = canSetHeight;
        }
        ctx.moveTo((borderWidth/2), canSetHeight+(borderWidth/2));
        ctx.lineTo((borderWidth/2), canSetHeight-leftProgressBorderLength);
        ctx.stroke();
      }

      // 绘制百分比进度文字数值
      timeCount += 15;
      percent = `${Math.floor(timeCount/(time * 1000) * 100)}%`;
      if (Math.floor(timeCount/(time * 1000) * 100) > 99) {
        percent = `99%`;
      }
      this.setState({
        percent,
      });
      // ctx.font="30px Arial";    
      // ctx.textAlign="center";     
      // ctx.fillText(`${percent}`,150,120);
      if (leftProgressBorderLength === canSetHeight) {
        clearInterval(this.progressInterval);
      }
    }, 15);
  }

  render() {
    const { percent } = this.state;
    const { canvasId } = this.props;

    return (
      <div className="border-progress" ref={this.borderProgressDom}>
        {this.props.children}
        <canvas id={canvasId} className="my-canvas"></canvas>
        <div className="border-progress-percent">{percent}</div>
      </div>
    )
  }
}

export default BorderProgress;

进度条组件BorderProgress样式：

.border-progress {
  display: inline-block;
  position: relative;

  .my-canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 1;
    top: 0;
    left: 0;
  }

  .border-progress-percent {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    top: 0;
    left: 0;
  }
}

使用进度条组件BorderProgress：

<div className="draft-list-item draft-list-item-nodata" key={index}>
  <BorderProgress time={60} key={index} canvasId={ele.videoInfoNo}>
    <div className="border-progress-content"></div>
  </BorderProgress>
</div>