HTML 参考手册 目录

HTML canvas clearRect() 方法

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

语法

clearRect() 方法的语法如下:

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

参数说明:

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

示例

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

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

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

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

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

注意事项

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

结论

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


下一篇:HTML 标签列表(字母排序)