我可以用javascript创建下雨效果吗？
I need to achieve something like this for my website: Flash Rain Effect
Is that possible to do in Javascript? I want it to be just as smooth as it is in Flash.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
是的，这是可能的： http://www.lab4games.net/zz85/blog/2010/03/10/rain-water-ripples-with-html-canvas-javascript-jquery/
平滑度是相对的，并且您可能无法获得与硬件加速Flash相同的性能。话虽如此，越来越多的浏览器开始整合本机硬件加速（Direct2D 等）。
Yes, it's possible: http://www.lab4games.net/zz85/blog/2010/03/10/rain-water-ripples-with-html-canvas-javascript-jquery/
Smoothness is something relative, and you may not be able to have the same performance as hardware-accelerated Flash. With that said, more and more browsers are starting to incorporate native hardware acceleration (Direct2D and otherwise).
您应该能够使用 JavaScript 和 canvas 元素 (HTML5) 的组合来完成此操作。
You should be able to do this using a combination of JavaScript and canvas elements (HTML5).
如果你不想使用画布（或不能），你可以通过创建一个看起来像雨滴的图像来做到这一点，将其设为具有 alpha 透明度的 PNG，这样矩形的非水滴部分就不会出现。出现。然后，您以编程方式创建 200 个左右的 IMG，并将它们绝对（随机）放置在场景上。每个都被定位，然后变得可见几毫秒，然后变得不可见，然后冲洗并重复。
为了实现多样性，您可以制作不同尺寸和色调的图像，以便有些出现在背景中，有些出现在前景中，然后改变这些图像。
If you don't want to use the Canvas (or can't) you can do that by creating an image that looks like a rain drop, make it a PNG with alpha transparency so the non-drop parts of the rectangle don't show up. Then you create 200 or so IMGs programmatically and position them absolutely (and randomly) over your scene. Each one gets positioned, then turned visible for a few milliseconds, then turned invisible, then rinse and repeat.
For variety you can either make images of different sizes and shades so some seem in the background and some in the foreground, and vary those.