vue3中使用canvas

置顶 Abao

已于 2024-08-21 19:54:51 修改

阅读量4.8k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： vue3 canvas 文章标签： vue.js

于 2023-02-08 10:24:10 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_72439307/article/details/128930162

vue3 同时被 2 个专栏收录

4 篇文章

订阅专栏

canvas

2 篇文章

订阅专栏

本文介绍如何在Vue3项目中利用Canvas进行图形绘制，包括画圆、直线、箭头及文字等基本元素，并提供了通过ref和ID两种方式获取画笔的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
    );