javascript - 使用jquery，如何清除 Canvas 中的项目？

Question

我是using this jquery code页面上掉落五彩纸屑。这里is the demo page 。

它运行良好，我发现我可以启动和停止函数来控制更新的发生，但我没有看到“clear()”方法可以从 Canvas 上删除所有五彩纸屑。

下面是我的 html，我的 Canvas 上有一个背景，我不希望将其删除，但我只是想要一种方法来清除 Canvas 上的所有五彩纸屑，这样我只能看到背景图像。

 <canvas style="background-repeat:no-repeat;background-image: url('/Content/Images/myImage.png');" id="confetti" width="1" height="1"></canvas>

Answer 1

您可以自己添加一个clear():

// Somewhere inside this
confetti.Context = function (id) {
  ...
  this.clear = function () {
    this.stop();
    context.clearRect(0, 0, canvas.width, canvas.height);
  }
  ...
}

然后可以在代码中的其他任何地方调用它，例如:

confetti.clear();