vue3中使用canvas_vue3 canvas

1、先封装一个canvas.ts，通过两种方式获取画布看个人需求

export default function canvasFunctions() {
  //画圆 ref获取画笔
  const drawCircle = (
    x: any,
    y: any,
    r: any,
    color: any,
    width: any,
    canvas: any
  ) => {
    const ctx = canvas.value.getContext("2d");
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 2 * Math.PI);
    ctx.strokeStyle = color;
    ctx.fillStyle = color;
    ctx.lineWidth = width;
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
  };
  //画圆 id获取画笔
  const drawCircleById = (
    x: any,
    y: any,
    r: any,
    color: any,
    width: any,
    ctx: any
  ) => {
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 2 * Math.PI);
    ctx.strokeStyle = color;
    ctx.fillStyle = color;
    ctx.lineWidth = width;
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
  };
  // 画直线 ref获取画笔
  const drawLine = (
    x: any,
    y: any,
    x1: any,
    y1: any,
    color: any,
    width: any,
    canvas: any
  ) => {
    const ctx = canvas.value.getContext("2d");
    ctx.beginPath();
    ctx.setLineDash([]);
    ctx.moveTo(x, y);
    ctx.lineTo(x1, y1);
    ctx.strokeStyle = color; //在着色之前设置颜色
    ctx.lineWidth = width; //在着色之前设置线宽
    ctx.stroke();
    ctx.closePath();
  };
  // 画直线 id获取画笔
  const drawLineById = (
    x: any,
    y: any,
    x1: any,
    y1: any,
    color: any,
    width: any,
    ctx: any
  ) => {
    ctx.beginPath();
    ctx.setLineDash([]);
    ctx.moveTo(x, y);
    ctx.lineTo(x1, y1);
    ctx.strokeStyle = color; //在着色之前设置颜色
    ctx.lineWidth = width; //在着色之前设置线宽
    ctx.stroke();
    ctx.closePath();
  };
  // 画箭头 ref获取画笔
  const drawArrowLine = (
    x: any,
    y: any,
    x1: any,
    y1: any,
    x2: any,
    y2: any,
    color: any,
    width: any,
    canvas: any
  ) => {
    const ctx = canvas.value.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.lineTo(x, y);
    ctx.fillStyle = color; //在着色之前设置颜色
    ctx.lineWidth = width; //在着色之前设置线宽
    ctx.strokeStyle = color;
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
  };
  // 画箭头  id获取画笔
  const drawArrowLineById = (
    x: any,
    y: any,
    x1: any,
    y1: any,
    x2: any,
    y2: any,
    color: any,
    width: any,
    ctx: any
  ) => {
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.lineTo(x, y);
    ctx.fillStyle = color; //在着色之前设置颜色
    ctx.lineWidth = width; //在着色之前设置线宽
    ctx.strokeStyle = color;
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
  };
  // 填充文字 ref获取画笔
  const write = (
    text: any,
    fontsize: any,
    x: any,
    y: any,
    color: any,
    canvas: any
  ) => {
    const ctx = canvas.value.getContext("2d");
    ctx.fillStyle = color;
    ctx.font = fontsize;
    ctx.fillText(text, x, y);
  };
  // 填充文字 id获取画笔
  const writeById = (
    text: any,
    fontsize: any,
    x: any,
    y: any,
    color: any,
    ctx: any
  ) => {
    ctx.fillStyle = color;
    ctx.font = fontsize;
    ctx.fillText(text, x, y);
  };
  return {
    drawCircle,
    drawCircleById,
    drawLine,
    drawLineById,
    drawArrowLine,
    drawArrowLineById,
    write,
    writeById,
  };
}

2、定义画布并获取ref

const canvas = ref();
<canvas ref="canvas" id="canvas" height="400" width="1600"></canvas>

3、第二种通过js获取dom

let ctx: HTMLElement | null = document.getElementById(“canvas”).getContext("2d");

4、把封装好的方法解构出来

import canvasFunctions from "@/utils/canvas";
let {
  drawCircle,
  drawCircleById,
  drawLine,
  drawLineById,
  drawArrowLine,
  drawArrowLineById,
  write,
  writeById,
} = canvasFunctions();

5、使用ref调用 传入canvas（见第二条）

drawCircle(x, y, 20, “red”, 1, canvas);

6、使用dom调用 传入ctx（见第三条）

drawCircleById(
      x,
      y,
      20,
      "red",
      1,
      ctx
    );