1. 需求效果

需要一个蚂蚁线，周围边框可动，效果如下：

2. 实现代码

<template>
  <div>
    <canvas id="canvas" width="200" height="200"></canvas>
  </div>
</template>
<script>
export default {
  data() {
    return {
      offsetVal: 0,
    };
  },
  methods: {
    // 绘制蚂蚁线
    drawAntLine() {
      let canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        let ctx = canvas.getContext("2d");
        // 每次绘制之前，清除之前的矩形，模拟是虚线在移动的效果
        ctx.clearRect(0, 0, 200, 200);
        // 设置虚线宽度
        ctx.setLineDash([8, 6]); // [虚线连接长度，虚线间的距离]
        // 设置虚线移动距离
        ctx.lineDashOffset = -this.offsetVal;
        ctx.strokeRect(0, 0, 200, 200);
      }
    },
    // 蚂蚁线开始移动
    march(){
        this.offsetVal++;
        if(this.offsetVal > 10){
            this.offsetVal = 0;
        }
        this.drawAntLine();
        setTimeout(()=>{
            this.march()
        },20)
    }
  },
  mounted() {
    this.march();
  },
};
</script>

3. API相关信息

• clearRect(x,y,width,height) 清除从(x,y)点起始，宽度width，高度height的矩形信息
• setLineDash([虚线长度,虚线间距离]) 设置虚线框中虚线的长度和虚线间的距离
• lineDashOffset = val 虚线每次移动val
• strokeRect(x,y,width,height) 从(x,y)点开始，绘制宽度width，高度height的矩形线框

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~