Vue趣味【Vue3+Element Plus+Canvas实现一个简易画板；支持导出为图片】

以下是一个简易的Vue3画板组件实例，使用Element Plus进行布局和Element Plus的el-button进行操作，并使用Canvas绘图功能。

<template>
  <div class="canvas-container">
    <canvas ref="canvasRef" @mousedown="startDraw" @mousemove="drawing" @mouseup="endDraw"></canvas>
  </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
import { ElMessageBox } from 'element-plus';
 
const canvasRef = ref(null);
const ctx = ref(null);
const isDrawing = ref(false);
 
const startDraw = (e) => {
  isDrawing.value = true;
  const pos = getPosition(e);
  ctx.value.beginPath();
  ctx.value.moveTo(pos.x, pos.y);
};
 
const drawing = (e) => {
  if (!isDrawing.value) return;
  const pos = getPosition(e);
  ctx.value.lineTo(pos.x, pos.y);
  ctx.value.stroke();
};
 
const endDraw = () => {
  isDrawing.value = false;
};
 
const getPosition = (e) => {
  const rect = canvasRef.value.getBoundingClientRect();
  return { x: e.clientX - rect.left, y: e.clientY - rect.top };
};
 
onMounted(() => {
  const canvas = canvasRef.value;
  canvas.width = canvas.clientWidth;
  canvas.height = canvas.clientHeight;
  ctx.value = canvas.getContext('2d');
  ctx.value.strokeStyle = '#000';
  ctx.value.lineWidth = 5;
});
 
const clearCanvas = () => {
  ctx.value.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height);
};
 
const downloadImage = () => {
  const img = canvasRef.value.toDataURL('image/png');
  const a = document.createElement('a');
  a.href = img;
  a.download = 'canvas-image';
  a.click();
};
 
// 使用Element Plus的消息框服务
ElMessageBox.confirm('确定要清空画布吗?', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
}).then(() => {
  clearCanvas();
}).catch(() => {
  // 取消操作
});
</script>
 
<style scoped>
.canvas-container {
  width: 100%;
  height: 500px;
  position: relative;
}
 
canvas {
  width: 100%;
  height: 100%;
}
</style>

这个例子提供了一个基本的Vue3组件，用于创建一个可以绘图的画板。它使用了Canvas API来绘制线条，并且提供了清空画布和下载画布图片的功能。代码中使用了Element Plus的消息框服务来进行清空确认。