玩转 Vue.js Canvas：从零开始绘制随机圆形，打造独一无二的艺术品

2023-10-12 21:02:43

前言

欢迎来到 Vue.js Canvas 神奇之旅！在这场探索中，您将学习如何使用 Vue.js 和 Canvas API 协同作战，创造出独一无二的随机圆形艺术品。从入门基础到交互式应用，我们一步步掌握知识，让艺术创作触手可及。

1. 搭建 Vue.js + Canvas 画布

首先，让我们搭建一个简单的 Vue.js 应用作为我们的画布。

<template>
  <div id="canvas-container">
    <canvas ref="canvas" width="800" height="600"></canvas>
  </div>
</template>

import { ref } from "vue";

export default {
  setup() {
    const canvasRef = ref(null);

    const createRandomCircle = () => {
      // 在这里实现随机圆形的创建
    };

    return {
      canvasRef,
      createRandomCircle,
    };
  },
};

2. 绘制随机大小和位置的圆形

现在，是时候发挥 Canvas 的绘图魔力了！我们将使用 Canvas API 在画布上绘制随机大小和位置的圆形。

const createRandomCircle = () => {
  const canvas = canvasRef.value;
  const ctx = canvas.getContext("2d");

  // 随机圆形的位置和大小
  const x = Math.random() * canvas.width;
  const y = Math.random() * canvas.height;
  const radius = Math.random() * 50 + 10;

  // 绘制圆形
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI);
  ctx.fillStyle = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0.5)`;
  ctx.fill();
};

3. 构建交互式圆形生成器

现在，让我们让我们的应用变得更加有趣和交互性！我们将在用户点击按钮时生成随机圆形。

<template>
  <div id="canvas-container">
    <canvas ref="canvas" width="800" height="600"></canvas>
    <button @click="createRandomCircle">生成圆形</button>
  </div>
</template>

import { ref } from "vue";

export default {
  setup() {
    const canvasRef = ref(null);

    const createRandomCircle = () => {
      // 在这里实现随机圆形的创建
    };

    return {
      canvasRef,
      createRandomCircle,
    };
  },
};