HTML5 Canvas 绘制花朵图案 - 示例与教程 - 常规

使用 HTML5 Canvas 绘制花朵图案是一个有趣的项目，可以帮助您学习基本的 Canvas API 操作。以下是完整的代码示例和详细解释：

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Canvas 花朵图案</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        function drawFlower(x, y, size) {
            // 绘制花朵的中心圆形
            ctx.beginPath();
            ctx.arc(x, y, size, 0, Math.PI * 2);
            ctx.fillStyle = 'yellow';
            ctx.fill();
            ctx.closePath();

            // 绘制花瓣
            ctx.beginPath();
            ctx.arc(x - size / 2, y - size / 2, size / 4, 0, Math.PI * 2);
            ctx.fillStyle = 'orange';
            ctx.fill();
            ctx.closePath();

            ctx.beginPath();
            ctx.arc(x + size / 2, y - size / 2, size / 4, 0, Math.PI * 2);
            ctx.fillStyle = 'orange';
            ctx.fill();
            ctx.closePath();

            ctx.beginPath();
            ctx.arc(x - size / 2, y + size / 2, size / 4, 0, Math.PI * 2);
            ctx.fillStyle = 'orange';
            ctx.fill();
            ctx.closePath();

            ctx.beginPath();
            ctx.arc(x + size / 2, y + size / 2, size / 4, 0, Math.PI * 2);
            ctx.fillStyle = 'orange';
            ctx.fill();
            ctx.closePath();
        }

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            const x = canvas.width / 2;
            const y = canvas.height / 2;
            const size = 100;

            drawFlower(x, y, size);

            requestAnimationFrame(animate);
        }

        animate();
    </script>
</body>
</html>

代码解释：

HTML 结构：
- <canvas id="canvas"></canvas> 创建了一个 Canvas 元素，并使用 id 属性进行标识。
- <style> 标签定义了基本的样式，确保 Canvas 占据整个浏览器窗口。
JavaScript 代码：
- canvas = document.getElementById('canvas') 获取 Canvas 元素。
- ctx = canvas.getContext('2d') 获取 2D 绘图上下文。
- canvas.width = window.innerWidth; canvas.height = window.innerHeight; 将 Canvas 尺寸设置为窗口大小。
- drawFlower(x, y, size) 函数：
  - ctx.beginPath() 和 ctx.closePath() 开始和结束绘制路径。
  - ctx.arc() 绘制圆形，参数分别为中心点坐标 (x, y)、半径 (size)、起始角度、结束角度和是否顺时针。
  - ctx.fillStyle = 'yellow' 设置填充颜色。
  - ctx.fill() 填充路径。
- animate() 函数：
  - ctx.clearRect(0, 0, canvas.width, canvas.height) 清除 Canvas 上的内容。
  - 计算花朵的中心坐标 (x, y) 和大小 (size)。
  - 调用 drawFlower() 函数绘制花朵。
  - requestAnimationFrame(animate) 递归调用 animate() 函数，实现动画效果。

自定义花朵图案：

你可以通过修改 drawFlower() 函数来改变花朵的样式：

**颜色：**修改 ctx.fillStyle 属性。
**形状：**使用其他 Canvas 绘图方法，例如 ctx.lineTo()、ctx.bezierCurveTo() 等。
**大小和位置：**改变 size 参数以及 x 和 y 坐标。

尝试不同的组合，创建出独特的花朵图案！