一分钟get，轻松搭建Vue3+Element Plus+Canvas简易画板

用 Vue3、Element Plus 和 Canvas 搭建一个功能强大的画板

在数字艺术的领域中，画板早已成为设计师和艺术爱好者必不可少的工具。借助 Vue3、Element Plus 和 Canvas，我们可以轻松创建功能强大的画板，释放我们的创造力。

1. 环境搭建

• 安装 Vue3： npm install vue@3
• 安装 Element Plus： npm install element-plus
• 安装 Canvas： npm install canvas

2. 创建项目

使用 Vue3 CLI 创建一个新的项目：

vue create my-drawing-board

3. 编写代码

DrawingBoard.vue 组件：

<template>
  <div>
    <el-button @click="startDrawing">开始作画</el-button>
    <el-button @click="stopDrawing">停止作画</el-button>
    <el-button @click="exportImage">导出图片</el-button>
    <canvas ref="canvas" :width="canvasWidth" :height="canvasHeight"></canvas>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  props: {
    canvasWidth: {
      type: Number,
      default: 500,
    },
    canvasHeight: {
      type: Number,
      default: 500,
    },
  },
  setup() {
    const canvasRef = ref(null)
    const ctx = ref(null)
    const isDrawing = ref(false)
    const lineWidth = ref(2)
    const strokeColor = ref('black')

    const startDrawing = () => {
      isDrawing.value = true
      ctx.value = canvasRef.value.getContext('2d')
      ctx.value.lineWidth = lineWidth.value
      ctx.value.strokeStyle = strokeColor.value
    }

    const stopDrawing = () => {
      isDrawing.value = false
    }

    const exportImage = () => {
      const imageData = canvasRef.value.toDataURL('image/png')
      const link = document.createElement('a')
      link.href = imageData
      link.download = 'my-drawing.png'
      link.click()
    }

    const draw = (e) => {
      if (!isDrawing.value) return
      const { clientX, clientY } = e
      const rect = canvasRef.value.getBoundingClientRect()
      const x = clientX - rect.left
      const y = clientY - rect.top
      ctx.value.lineTo(x, y)
      ctx.value.stroke()
    }

    onMounted(() => {
      canvasRef.value.addEventListener('mousedown', startDrawing)
      canvasRef.value.addEventListener('mousemove', draw)
      canvasRef.value.addEventListener('mouseup', stopDrawing)
    })

    return {
      canvasRef,
      ctx,
      isDrawing,
      startDrawing,
      stopDrawing,
      exportImage,
      lineWidth,
      strokeColor,
    }
  },
}
</script>

main.js 文件：

import { createApp } from 'vue'
import DrawingBoard from './DrawingBoard.vue'

const app = createApp(DrawingBoard)
app.mount('#app')

4. 运行项目

运行项目：

npm run serve

5. 使用画板

打开浏览器，访问 http://localhost:8080，即可看到功能强大的画板。

• 开始作画： 点击“开始作画”按钮。
• 停止作画： 点击“停止作画”按钮。
• 导出图片： 点击“导出图片”按钮，将画布上的内容导出为 PNG 图片。

其他特性

除了基本功能外，我们的画板还提供了以下特性：

• 自定义画笔宽度： 通过 lineWidth 属性设置画笔宽度。
• 自定义画笔颜色： 通过 strokeColor 属性设置画笔颜色。

常见问题解答

1. 如何更改画布大小？

在 DrawingBoard.vue 组件中修改 canvasWidth 和 canvasHeight 属性即可。

2. 如何清除画布？

点击“停止作画”按钮，然后再次点击“开始作画”按钮即可。

3. 如何保存我的绘画？

点击“导出图片”按钮，将画布上的内容导出为 PNG 图片。

4. 我可以在画板上使用其他工具吗？

目前，此画板只支持画笔工具，未来可能会添加更多工具。

5. 如何在画板上添加背景图像？

目前，此画板不支持添加背景图像，但此特性可能会在未来版本中添加。

结论

借助 Vue3、Element Plus 和 Canvas，我们创建了一个功能强大的画板，可以满足各种数字艺术需求。希望这篇教程对您有帮助，并祝您创作出精彩的作品！