使用vue3加上画布画一个蜡笔小新

在Vue3中结合HTML5 Canvas绘制蜡笔小新，你可以创建一个组件，利用JavaScript处理绘画逻辑。首先，确保安装了Vue，并导入必要的库如`@vue/cli-service`和`vue-template-compiler`（如果你还没有）。以下是一个简单的步骤：

1. 创建一个新的Vue项目并设置基本结构：

vue create wax-baby-sketch
cd wax-baby-sketch

2. 在`src/components`目录下创建一个名为`SketchCanvas.vue`的文件，添加以下模板、脚本和样式：

**SketchCanvas.vue**

<template>
  <canvas ref="canvas" :width="canvasWidth" :height="canvasHeight"></canvas>
</template>

<script setup>
import { ref } from 'vue';

const canvas = ref(null);
const ctx = canvas.value.getContext('2d');
const canvasWidth = 800;
const canvasHeight = 600;
let isDrawing = false;

function drawWaxBaby() {
  // 在这里编写蜡笔小新的草图绘制函数，比如用简单形状表示头部、身体等部分
  // 简化示例：
  const babyHead = ...; // 蜡笔画的小新头部
  const babyBody = ...; // 身体

  ctx.save();
  if (isDrawing) {
    ctx.beginPath();
    ctx.fillStyle = '#000'; // 黑色蜡笔颜色
    ctx.arc(babyHead.x, babyHead.y, 30, 0, Math.PI * 2); // 头部圆形
    ctx.fill();

    ctx.beginPath();
    ctx.moveTo(babyBody.left, babyBody.top);
    ctx.lineTo(babyBody.right, babyBody.bottom);
    ctx.stroke(); // 身体线条
  }
  ctx.restore();
}

useEffect(() => {
  canvas.value.addEventListener('mousedown', () => {
    isDrawing = true;
  });

  canvas.value.addEventListener('mouseup', () => {
    isDrawing = false;
  });
  
  canvas.value.addEventListener('mousemove', (e) => {
    if (isDrawing) {
      const position = { x: e.clientX - canvas.value.offsetLeft, y: e.clientY - canvas.value.offsetTop };
      drawWaxBaby({ x: position.x, y: position.y }); // 更新画的位置
    }
  });
}, [isDrawing]);
</script>

<style scoped>
canvas {
  border: 1px solid #ccc;
}
</style>

这个例子仅提供了一个基础框架，你需要根据实际需求完善蜡笔小新的图形细节。