html5画布-如何使用'destination- out‘只清除最近绘制的形状？

HTML5画布是HTML5提供的一个功能强大的绘图工具，可以通过JavaScript来操作和绘制图形。其中，'destination-out'是画布的一个全局合成操作，用于清除最近绘制的形状。

要使用'destination-out'只清除最近绘制的形状，可以按照以下步骤进行操作：

创建画布：在HTML文件中，使用<canvas>标签创建一个画布，并设置宽度和高度。

<canvas id="myCanvas" width="500" height="500"></canvas>

获取画布上下文：使用JavaScript获取画布的上下文，以便后续的绘制操作。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

绘制形状：使用上下文对象的绘制方法，绘制需要清除的形状。

ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100); // 绘制一个红色矩形

使用'destination-out'清除形状：在绘制完形状后，设置全局合成操作为'destination-out'，然后绘制一个与之前形状相同的形状，即可清除最近绘制的形状。

ctx.globalCompositeOperation = 'destination-out';
ctx.fillRect(50, 50, 100, 100); // 清除最近绘制的红色矩形

完整的示例代码如下：

<canvas id="myCanvas" width="500" height="500"></canvas>

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

  ctx.fillStyle = "red";
  ctx.fillRect(50, 50, 100, 100); // 绘制一个红色矩形

  ctx.globalCompositeOperation = 'destination-out';
  ctx.fillRect(50, 50, 100, 100); // 清除最近绘制的红色矩形
</script>

应用场景：