HTML5中怎样清除canvas？_canvas销毁-优快云博客

本文链接：https://blog.youkuaiyun.com/zy1992As/article/details/131165192

本文介绍了如何使用clearRect()方法在前端HTML5的Canvas元素中清除指定区域的内容。示例代码展示了一个绘制红色矩形后，在2秒后清除整个Canvas的场景。实际应用中，清除Canvas的时机应根据具体需求调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要清除前端HTML5中的Canvas 元素，可以使用clearRect()方法。该方法用于清除指定矩形区域内的内容。

　　以下是使用clearRect()方法清除Canvas的基本示例：

<!DOCTYPE html>
<html>
<head>
  <title>清除 Canvas</title>
</head>
<body>
  <canvas id="myCanvas" width="400" height="400"></canvas>

  <script>
    // 获取 Canvas 元素
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

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

    // 等待一段时间后清除 Canvas
    setTimeout(function() {
      context.clearRect(0, 0, canvas.width, canvas.height);
    }, 2000);
  </script>
</body>
</html>

　　在上述示例中，首先获取Canvas元素及其上下文对象。然后，使用fillRect()方法绘制一个红色矩形。最后，使用clearRect()方法在2秒后清除整个Canvas。在clearRect()方法中，传入的参数为矩形区域的起始点坐标(0, 0)和Canvas的宽高，以清除整个Canvas的内容。

　　请注意，在实际应用中，我们可能需要根据具体需求选择合适的时机来清除Canvas，而不仅仅是在一段固定的时间后。笔者以上列举的示例只是为了演示清除Canvas的基本方法。