vue + canvas实现涂鸦面板的示例代码

<template>
  <div class="drawing-board">
    <div id="container" ref="container" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script setup>
  import { ref, onMounted } from 'vue'
  import Board from '@/canvas/board.js'
  const container = ref(null)
  onMounted(() => {
    // 创建一个空白画板
    new Board(container.value)
  })
</script>

export default class BoardCanvas {
  constructor(container) {
    // 容器
    this.container = container
    // canvas画布
    this.canvas = this.createCanvas(container)
    // 绘制工具
    this.ctx = this.canvas.getContext('2d')
    // 起始点位置
    this.startX = 0
    this.stateY = 0
    // 画布历史栈
    this.pathSegmentHistory = []
    this.index = 0
    // 初始化
    this.init()
  }
  // 创建画布
  createCanvas(container) {
    const canvas = document.createElement('canvas')
    canvas.width = container.clientWidth
    canvas.height = container.clientHeight
    canvas.style.display = 'block'
    canvas.style.backgroundColor = 'antiquewhite'
    container.appendChild(canvas)
    return canvas
  }
  // 初始化
  init() {
    this.addPathSegment()
    this.setContext2DStyle()
    // 阻止默认右击事件
    this.canvas.addEventListener('contextmenu', (e) => e.preventDefault())
    // 自定义鼠标按下事件
    this.canvas.addEventListener('mousedown', this.mousedownEvent.bind(this))
    // 自定义键盘按下事件
    window.document.addEventListener('keydown', this.keydownEvent.bind(this))
  }
  // 设置画笔样式
  setContext2DStyle() {
    this.ctx.strokeStyle = '#EB7347'
    this.ctx.lineWidth = 3
    this.ctx.lineCap = 'round'
    this.ctx.lineJoin = 'round'
  }
}

mousedownEvent(e) {
  const that = this
  const ctx = this.ctx
  ctx.beginPath()
  ctx.moveTo(e.offsetX, e.offsetY)
  ctx.stroke()
  this.canvas.onmousemove = function (e) {
    ctx.lineTo(e.offsetX, e.offsetY)
    ctx.stroke()
  }
  this.canvas.onmouseup = this.canvas.onmouseout = function () {
    that.addPathSegment()
    this.onmousemove = null
    this.onmouseup = null
    this.onmouseout = null
  }
}

// 键盘事件
keydownEvent(e) {
  if (!e.ctrlKey) return
  switch (e.keyCode) {
    case 90:
      this.undo()
      break
    case 89:
      this.redo()
      break
  }
}

/*
 * @name 返回一个 ImageData 对象，其中包含 Canvas 画布部分或完整的像素点信息
 * @param { Number } sx 将要被提取的图像数据矩形区域的左上角 x 坐标
 * @param { Number } sy 将要被提取的图像数据矩形区域的左上角 y 坐标
 * @param { Number } sWidth  将要被提取的图像数据矩形区域的宽度
 * @param { Number } sHeight 将要被提取的图像数据矩形区域的高度
 * @return { Object } 返回一个 ImageData 对象，包含 Canvas 给定的矩形图像像素点信息
 */
context.getImageData(sx, sy, sWidth, sHeight);
 /*
 * @name 将给定 ImageData 对象的数据绘制到位图上
 * @param { Object } ImageData 对象，包含 Canvas 给定的矩形图像像素点信息
 * @param { Number } dx 目标 Canvas 中被图像数据替换的起点横坐标
 * @param { Number } dy 目标 Canvas 中被图像数据替换的起点纵坐标
 */
 context.putImageData(ImageData, dx, dy);

// 添加路径片段
addPathSegment() {
  const data = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height)
  // 删除当前索引后的路径片段，然后追加一个新的路径片段，更新索引
  this.pathSegmentHistory.splice(this.index + 1)
  this.pathSegmentHistory.push(data)
  this.index = this.pathSegmentHistory.length - 1
}

// 撤销
undo() {
  if (this.index <= 0) return
  this.index--
  this.ctx.putImageData(this.pathSegmentHistory[this.index], 0, 0)
}

// 恢复
redo() {
  if (this.index >= this.pathSegmentHistory.length - 1) return
  this.index++
  this.ctx.putImageData(this.pathSegmentHistory[this.index], 0, 0)
}