我可以在javascript中创建下雨效果吗？答案

【问题标题】：Can I create rain effect in javascript?我可以在javascript中创建下雨效果吗？
【发布时间】：2010-06-12 01:41:35
【问题描述】：

我需要为我的网站实现这样的目标：Flash Rain Effect

这可以在 Javascript 中实现吗？我希望它像在 Flash 中一样流畅。

Another flash rain drop water effect

【问题讨论】：

标签： javascript flash html effects

【解决方案1】：

是的，有可能：http://www.lab4games.net/zz85/blog/2010/03/10/rain-water-ripples-with-html-canvas-javascript-jquery/

流畅度是相对而言的，您可能无法获得与硬件加速 Flash 相同的性能。话虽如此，越来越多的浏览器开始加入原生硬件加速（Direct2D 等）。

【讨论】：

太棒了！正是我想要的:)

【解决方案2】：

您应该能够使用 JavaScript 和画布元素 (HTML5) 的组合来做到这一点。

【讨论】：

我正在使用 Visual Web Developer 2010 (ASP.NET) 构建我的网站，我还能用 ASP.NET 实现 HTML5 Canvas 吗？
@Sahat：Canvas 完全是客户端 JavaScript 和 HTML，因此它适用于任何服务器平台。

【解决方案3】：

如果您不想使用 Canvas（或不能），您可以通过创建一个看起来像雨滴的图像来做到这一点，将其设为具有 Alpha 透明度的 PNG，以便矩形的非水滴部分不要出现。然后您以编程方式创建 200 个左右的 IMG，并将它们绝对（随机）定位在您的场景中。每个都被定位，然后在几毫秒内变为可见，然后变为不可见，然后冲洗并重复。

为了多样化，您可以制作不同大小和色调的图像，让一些看起来在背景中，一些在前景中，并改变它们。

【讨论】：

您也许可以通过缩放图像来获得多样性。试验一下，看看有什么效果！