html - HTML5 粒子效果

Question

我正在尝试创建类似的效果，如下所示：

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

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

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

Answer 1

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

一种干净的方法是使用 JavaScript 在画布内完成所有操作。您可以在画布上绘制前景草和背景山脉。但是，如果您想部分使用 a ，您可以使用 CSS或<div>将 div 覆盖在画布顶部，也可以使用 CSS设置它们的顺序。position:fixedposition:absolutez-index

我推荐以下链接，向下滚动查看图片：http: //thinkvitamin.com/code/how-to-draw-with-html-5-canvas/

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

Answer 2

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