HTML5粒子效果

Question

我正在尝试创建一个类似的效果：

http://timothypoon.com/blog/2011/01/19/html5-canvas-particle-animation/

然而，我似乎无法在我的页面上使用它，我想在包含图像的div中应用此效果。这是可能的还是一切都必须在画布上发生？

当我尝试重新创建教程中描述的效果时，我会收到许多错误，例如未定义的变量等。

Answer 1

您可以使用Canvas，或使用CSS转换和阴影，或两者的混合来重新创建它。至于未定义的变量，我没有帮助，因为你没有发布你的代码。

一种干净的方法是使用JavaScript在画布中完成所有操作。您可以将前景草和背景山绘制到画布上。但是，如果您想部分使用<div>，则可以使用CSS position:fixed或position:absolute将div叠加在画布顶部，同时使用CSS z-index设置其顺序

我建议使用以下链接，向下滚动以查看图像： http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/

我不知道我能提供多少帮助，因为你提供的教程很好地解释了一切。但如果您有任何进一步的疑问，请随时发表评论或更新您的问题。

Answer 2

您可以使用质子粒子引擎轻松实现您想要的效果，其API非常简单。http://a-jie.github.io/Proton/