Javascript 清除画布

当我们在使用 canvas 绘制图形时，有时候需要清除画布，以便重新绘图或者清除不需要的图形。Javascript 提供了 clearRect() 方法来清除画布。

clearRect()

clearRect() 方法可清除给定矩形内的全部或部分像素，方法格式如下：

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

参数解释如下：

• context：表示画布的上下文，即 canvas.getContext() 方法返回的对象。
• x：矩形起点横坐标。
• y：矩形起点纵坐标。
• width：矩形宽度。
• height：矩形高度。

清除整个画布

要清除整个画布，可以使用以下代码：

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);

上面代码中，canvas.width 和 canvas.height 表示画布的宽度和高度。

清除指定区域

要清除指定区域的图形，只需要将矩形参数设置为该区域的起点、宽度和高度即可。

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.clearRect(x, y, width, height);

示例代码

<canvas id="myCanvas"></canvas>
<button onclick="clearCanvas()">清除画布</button>

<script>
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");

  context.fillStyle = "red";
  context.fillRect(10, 10, 100, 100);

  function clearCanvas() {
    context.clearRect(0, 0, canvas.width, canvas.height);
  }
</script>

上面代码中，我们在画布上绘制了一个红色矩形，然后在按钮的点击事件中调用 clearCanvas() 方法来清除画布。