使用jquery，如何从画布中清除项目？

Question

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

它运行良好我看到我可以启动和停止函数来控制更新发生但我没有看到“clear（）”方法将从画布中删除所有的五彩纸屑。

下面是我的html，我在画布上有背景，我不希望删除它，但我只想要一种方法从画布中清除所有的五彩纸屑，所以我只看到背景图像。

 <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();