HTML Canvas clearrect() 方法

在Web前端开发中，HTML Canvas 是一个非常强大的工具，可以用来绘制图形、动画甚至是游戏。在Canvas中，我们经常需要清除之前绘制的内容，以便进行新的绘制。这时就可以使用 clearRect() 方法来清除指定矩形区域的内容。

clearRect() 方法的语法

clearRect() 方法用于清除指定矩形区域的内容。它的语法如下：

context.clearRect(x, y, width, height);

• x: 矩形左上角的 x 坐标
• y: 矩形左上角的 y 坐标
• width: 矩形的宽度
• height: 矩形的高度

clearRect() 方法的示例

下面是一个简单的示例，展示了如何使用 clearRect() 方法清除Canvas中的内容：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>Canvas ClearRect 示例</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="100"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        // 绘制一个矩形
        context.fillStyle = "red";
        context.fillRect(10, 10, 50, 50);

        // 等待1秒后清除矩形
        setTimeout(function() {
            context.clearRect(10, 10, 50, 50);
        }, 1000);
    </script>
</body>
</html>

在这个示例中，我们首先绘制了一个红色的矩形，然后等待1秒后使用 clearRect() 方法清除了这个矩形。

注意事项

• 使用 clearRect() 方法清除的是指定矩形区域内的内容，而不是整个Canvas。
• 如果需要清除整个Canvas，可以使用 context.clearRect(0, 0, canvas.width, canvas.height);。

总的来说，clearRect() 方法是Canvas中非常有用的一个方法，可以帮助我们清除指定区域的内容，使得Canvas的绘制更加灵活和精确。