Vue 3与Canvas结合：绘制图形与动画的基础教程

Vue 3 是一个现代的前端框架，而 Canvas 是 HTML5 提供的强大绘图工具。将 Vue 3 和 Canvas 结合使用可以实现动态图形和动画效果。本文将详细介绍如何在 Vue 3 中使用 Canvas 绘制图形并创建动画。

1. Vue 3 与 Canvas 的结合基础

Vue 3 提供了强大的组件化开发能力，而 Canvas 则是一个可以在网页中绘制图形、图像和动画的 HTML 元素。通过 Vue 3 的生命周期钩子（如 onMounted）和响应式数据绑定，我们可以轻松地控制 Canvas 的内容更新。

创建 Vue 3 项目

首先确保你已经安装了 Vue CLI 或 Vite，并创建一个新的 Vue 3 项目：

npm init vite@latest vue3-canvas --template vue
cd vue3-canvas
npm install
npm run dev

引入 Canvas

在 Vue 组件中引入 Canvas 元素，并通过 ref 获取其上下文对象。

<template>
  <div>
    <canvas ref="myCanvas" width="600" height="400"></canvas>
  </div>
</template>

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

const myCanvas = ref(null);

onMounted(() => {
  const canvas = myCanvas.value;
  if (canvas) {
    const ctx = canvas.getContext('2d');
    // 在这里绘制图形或启动动画
  }
});
</script>

2. 使用 Canvas 绘制基本图形

Canvas 提供了丰富的 API 来绘制各种形状，包括矩形、圆形、线条等。

绘制矩形

使用 fillRect 和 strokeRect 方法绘制填充和边框矩形。

ctx.fillStyle = 'blue'; // 设置填充颜色
ctx.fillRect(50, 50, 150, 100); // 填充矩形

ctx.strokeStyle = 'red'; // 设置边框颜色
ctx.strokeRect(250, 50, 150, 100); // 边框矩形

绘制圆形

使用 arc 方法绘制圆形。

ctx.beginPath();
ctx.arc(400, 200, 50, 0, Math.PI * 2); // 圆心 (400, 200)，半径 50
ctx.fillStyle = 'green';
ctx.fill(); // 填充圆形
ctx.closePath();

绘制线条

使用 moveTo 和 lineTo 方法绘制线条。

ctx.beginPath();
ctx.moveTo(50, 300); // 起点
ctx.lineTo(250, 300); // 终点
ctx.strokeStyle = 'black';
ctx.stroke(); // 绘制线条
ctx.closePath();

3. 实现简单的动画

通过定时器（如 requestAnimationFrame）可以实现平滑的动画效果。

动画示例：移动的球

以下代码展示了一个在 Canvas 上移动的小球。

let x = 50, y = 50; // 小球初始位置
let dx = 2, dy = 2; // 每帧移动的距离
const radius = 20; // 小球半径

function drawBall() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2);
  ctx.fillStyle = 'orange';
  ctx.fill();
  ctx.closePath();

  // 更新小球位置
  x += dx;
  y += dy;

  // 碰撞检测
  if (x + radius > canvas.width || x - radius < 0) dx = -dx;
  if (y + radius > canvas.height || y - radius < 0) dy = -dy;

  requestAnimationFrame(drawBall); // 循环调用
}

drawBall(); // 启动动画

4. 响应式动画：基于用户输入

Vue 3 的响应式系统可以与 Canvas 动画结合，实现更复杂的交互效果。例如，根据用户的鼠标位置调整动画参数。

示例：跟随鼠标的小球

通过监听鼠标事件，动态更新小球的位置。

canvas.addEventListener('mousemove', (event) => {
  x = event.offsetX; // 鼠标 X 坐标
  y = event.offsetY; // 鼠标 Y 坐标
});

5. 性能优化与注意事项

• 减少重绘：尽量避免频繁调用 clearRect 和重新绘制整个画布，可以通过局部更新提高性能。
• 缓存复杂图形：对于复杂的静态图形，可以先绘制到一个离屏 Canvas 上，再复制到主画布。
• 限制帧率：使用 requestAnimationFrame 自动调整帧率，避免浪费资源。

6. 扩展讨论：Vue 3 + Three.js

如果需要更复杂的 3D 图形和动画，可以考虑结合 Three.js 使用。Vue 3 提供了良好的生态支持，例如 vue-three 插件，可以帮助开发者快速上手。