canvas绘制边框环绕进度

canvas这种，例如视频压缩时候参考咸鱼。

image.png

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

startProgress(ctx, canSetWidth, canSetHeight, borderWidth) {
            console.log('开始',ctx, canSetWidth, canSetHeight, borderWidth)
            clearInterval(this.progressInterval);
      
            let time=3// s
            let timeCount = 0;
            let percent = `0%`;
            let topProgressBorderLength = 0;
            let rightProgressBorderLength = 0;
            let bottomProgressBorderLength = 0;
            let leftProgressBorderLength = 0;
            // 修正粗细
            let fixnum=6;
            this.progressInterval = setInterval(() => {
              // 上
              if (topProgressBorderLength < canSetWidth) {
                borderWidth=4
                // 如果上边框小于当前canvas画布可设置宽度
                // 绘制矩形进度条top边框
                ctx.beginPath(); // 起始一条路径
                ctx.lineWidth = borderWidth; // 设置边框的线条宽度为8个像素
                ctx.strokeStyle = "#18C183"; // 设置线条颜色
                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
              ) {
                borderWidth=10
                // 如果上边框已经绘制完成，右边框小于当前canvas画布可设置高度
                // 绘制矩形进度条right边框
                ctx.beginPath(); // 起始一条路径
                ctx.lineWidth = borderWidth; // 设置边框的线条宽度为8个像素
                ctx.strokeStyle = "#18C183"; // 设置线条颜色
                ctx.lineCap = "round"; // 向线条的每个末端添加圆形线帽
                rightProgressBorderLength +=
                  canSetHeight / ((time * 1000) / 4 / 15);
                if (rightProgressBorderLength >= canSetHeight) {
                  rightProgressBorderLength = canSetHeight;
                }
                ctx.moveTo(canSetWidth + borderWidth / 2, borderWidth / 2)+fixnum;
                ctx.lineTo(
                  canSetWidth + borderWidth / 2,
                  rightProgressBorderLength+fixnum
                );
                ctx.stroke();
              }

              // 下
              if (
                !(rightProgressBorderLength < canSetHeight) &&
                bottomProgressBorderLength < canSetWidth
              ) {
                borderWidth=4
                // 如果右边框已经绘制完成，下边框小于当前canvas画布可设置宽度
                // 绘制矩形进度条bottom边框
                ctx.beginPath(); // 起始一条路径
                ctx.lineWidth = borderWidth; // 设置边框的线条宽度为8个像素
                ctx.strokeStyle = "#18C183"; // 设置线条颜色
                ctx.lineCap = "round"; // 向线条的每个末端添加圆形线帽
                bottomProgressBorderLength +=
                  canSetWidth / ((time * 1000) / 4 / 15);
                if (bottomProgressBorderLength >= canSetWidth) {
                  bottomProgressBorderLength = canSetWidth;
                }
                ctx.moveTo(
                  canSetWidth + borderWidth / 2+fixnum,
                  canSetHeight + borderWidth / 2+fixnum
                );
                ctx.lineTo(
                  canSetWidth + borderWidth / 2 - bottomProgressBorderLength+fixnum,
                  canSetHeight + borderWidth / 2+fixnum
                );
                ctx.stroke();
              }
              // 左
              if (
                !(bottomProgressBorderLength < canSetWidth) &&
                leftProgressBorderLength < canSetHeight
              ) {
                borderWidth=10
                // 如果上边框已经绘制完成，右边框小于当前canvas画布可设置高度
                // 绘制矩形进度条right边框
                ctx.beginPath(); // 起始一条路径
                ctx.lineWidth = borderWidth; // 设置边框的线条宽度为8个像素
                ctx.strokeStyle = "#18C183"; // 设置线条颜色
                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.percent=percent
              // this.setState({
              //   percent,
              // });
              // ctx.font="30px Arial";
              // ctx.textAlign="center";
              // ctx.fillText(`${percent}`,150,120);
              if (leftProgressBorderLength === canSetHeight) {
                clearInterval(this.progressInterval);
              }
            }, 15);
           
          },
          

ps:https://blog.csdn.net/Boale_H/article/details/121137737
原文为react的作为组件部分，但canvas通用js不影响。