HTML canvas clearRect() 方法

在 web 前端开发中，HTML canvas 是一个非常强大的工具，可以用来绘制图形、动画等。其中的 clearRect() 方法是一个非常重要的方法，用于清除指定矩形区域的内容。

语法

clearRect() 方法的语法如下：

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

参数说明：

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

示例

下面是一个简单的示例，演示如何使用 clearRect() 方法清除指定矩形区域的内容：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>Clear Rect Example</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="100"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

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

        // 清除矩形区域
        ctx.clearRect(20, 20, 20, 20);
    </script>
</body>
</html>

在上面的示例中，我们首先绘制了一个红色的矩形，然后使用 clearRect() 方法清除了矩形区域内部的内容。

注意事项

• clearRect() 方法只会清除指定矩形区域的内容，不会改变矩形区域之外的内容。
• 如果调用 clearRect() 方法时指定的矩形区域超出了 canvas 的范围，那么超出部分不会被清除。

结论

HTML canvas 的 clearRect() 方法是一个非常实用的方法，可以帮助我们清除指定矩形区域的内容，为后续的绘制操作提供清晰的画布。希望本文能够帮助你更好地理解和使用 clearRect() 方法。