vue3使用canvas画动态虚线和普通虚线

1、使用ref封装虚线方法

const drawDashed = (
    x: any,
    y: any,
    x1: any,
    y1: any,
    color: any,
    width: any,
    canvas: any
  ) => {
    const ctx = canvas.value.getContext("2d");
    ctx.lineWidth = width;
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.setLineDash([5, 15]);
    ctx.moveTo(x, y);
    ctx.lineTo(x1, y1);
    ctx.stroke();
    ctx.closePath();
  };

2、使用dom封装画虚线方法

const drawDashedById = (
    x: any,
    y: any,
    x1: any,
    y1: any,
    color: any,
    width: any,
    ctx: any
  ) => {
    ctx.lineWidth = width;
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.setLineDash([5, 15]);
    ctx.moveTo(x, y);
    ctx.lineTo(x1, y1);
    ctx.stroke();
    ctx.closePath();
  };

3、使用ref封装动态虚线

const drawDashedRun = (
    x: any,
    y: any,
    x1: any,
    y1: any,
    color: any,
    width: any,
    canvas: any
  ) => {
    const ctx = canvas.value.getContext("2d");
    // 设置起始偏移量
    let offSet = 0;
    drawDashedRun();
    function drawDashedRun() {
      // const ctx = canvas.value.getContext("2d");
      // 清除矩形内所有内容
      ctx.clearRect(x, y - 1, 95, 10);
      // 开始一次绘制
      ctx.beginPath();
      // 设置虚线4-2-4-2排列
      ctx.setLineDash([4, 2]);
      // 设置虚线偏移量
      ctx.lineDashOffset = -offSet;
      // 绘制圆形
      // ctx.arc(300, 300, 80, 0, Math.PI * 2);
      ctx.moveTo(x, y);
      ctx.lineTo(x1, y1);
      ctx.strokeStyle = color; //在着色之前设置颜色
      ctx.lineWidth = width; //在着色之前设置线宽
      // 执行绘制
      ctx.stroke();
      // 关闭此次绘制
      ctx.closePath();
      // 当偏移量大于16时重归0
      if (offSet > 16) {
        offSet = 0;
      }
      offSet++;
      // 通过setTimeout递归调用绘制
      setTimeout(drawDashedRun, 20);
    }
  };

4、使用dom封装动态虚线

 const drawDashedRunById = (
    x: any,
    y: any,
    x1: any,
    y1: any,
    color: any,
    width: any,
    ctx: any
  ) => {
    // 设置起始偏移量
    let offSet = 0;
    drawDashedRun();
    function drawDashedRun() {
      // const ctx = canvas.value.getContext("2d");
      // 清除矩形内所有内容
      ctx.clearRect(x, y - 1, 95, 10);
      // 开始一次绘制
      ctx.beginPath();
      // 设置虚线4-2-4-2排列
      ctx.setLineDash([4, 2]);
      // 设置虚线偏移量
      ctx.lineDashOffset = -offSet;
      // 绘制圆形
      // ctx.arc(300, 300, 80, 0, Math.PI * 2);
      ctx.moveTo(x, y);
      ctx.lineTo(x1, y1);
      ctx.strokeStyle = color; //在着色之前设置颜色
      ctx.lineWidth = width; //在着色之前设置线宽
      // 执行绘制
      ctx.stroke();
      // 关闭此次绘制
      ctx.closePath();
      // 当偏移量大于16时重归0
      if (offSet > 16) {
        offSet = 0;
      }
      offSet++;
      // 通过setTimeout递归调用绘制
      setTimeout(drawDashedRun, 20);
    }
  };

5、使用ref封装椭圆方法

const drawtuocircle = (
    canvas: any,
    x: any,
    y: any,
    a: any,
    b: any,
    color: any
  ) => {
    const ctx = canvas.value.getContext("2d");
    ctx.save();
    const r = a > b ? a : b;
    const ratioX = a / r;
    const ratioY = b / r;
    ctx.scale(ratioX, ratioY);
    ctx.beginPath();
    ctx.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI, false);
    ctx.closePath();
    ctx.restore();
    ctx.fillStyle = color;
    ctx.fill();
  };