HTML Canvas clearRect() 方法

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

clearRect() 方法的语法

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

-------------------- -- ------ --------

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

clearRect() 方法的示例

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

--------- -----
------
------
    ------------- --------- ----------
-------
------
    ------- ------------- ----------- ----------------------
    --------
        --- ------ - ------------------------------------
        --- ------- - ------------------------

        -- ------
        ----------------- - ------
        -------------------- --- --- ----

        -- ---------
        --------------------- -
            --------------------- --- --- ----
        -- ------
    ---------
-------
-------

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

注意事项

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

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