单击按钮时更改画布填充颜色

基础概念

在Web开发中，画布（Canvas）是一个HTML5元素，用于在网页上绘制图形。通过JavaScript，你可以控制画布上的绘图操作，包括更改填充颜色。

类型

2D Canvas：用于二维图形的绘制。
WebGL：用于三维图形的绘制，基于OpenGL ES。

应用场景

数据可视化：如折线图、柱状图、饼图等。
游戏开发：如2D或3D游戏中的图形渲染。
动态网页：如交互式的图表、动画效果等。

示例代码

以下是一个简单的示例，展示如何在单击按钮时更改2D Canvas的填充颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Canvas Fill Color</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <button id="changeColorBtn">Change Color</button>

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

        function draw() {
            ctx.fillStyle = currentColor;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

        document.getElementById('changeColorBtn').addEventListener('click', () => {
            currentColor = currentColor === 'blue' ? 'red' : 'blue';
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            draw();
        });

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