我们之前使用CSS3实现过 逼真的雨滴 ，但这个方法只适合用来模拟一些静态场景或少量雨滴动画，如果用来实现大量雨滴的动画，会遭遇严重的性能问题。而使用Canvas能利用硬件加速，渲染性能要高得多，适合用来创建大量粒子的动画。本例我们讲解如何使用Canvas 2D来实现一个“雨打窗户”的动画场景，雨滴（粒子）的数量可以有成百上千乃至上万个。本例不涉及更为复杂的3D空间场景的模拟。

预备知识

如果你不知道怎么使用Canvas 2D，请先阅读踏得网在线教程 Canvas基础知识 。

基本上浏览器为我们准备了一个2D渲染上下文，我们在这里绘制图形图像对象，绘制好后再和页面合成。所以和CSS不同，Canvas内部对象的变化不会影响DOM文档，也因此不会导致DOM重排和重绘而影响性能。

除了Canvas接口外，我们还需要具备一些基本的物理学和数学知识。我们观察实际物理世界中的雨点，还有这么几个特征：

能反射外部环境景色（真实的反射、环境折射情况相当复杂）

小的雨点停留在窗户上，由于有阻力而静止不动，但会被移动的雨滴所吞没

大到一定程度的雨点会因为重力效应而滑落

雨滴在滑落的过程中形成轨迹，这个现象会导致雨滴变小

由于雨点是液体，足够接近的雨点会相互吸引并融合成单个更大的雨点（因为单个球面积要远小于2个单独的球面积，因此融合后液体将处于势能最小状态即最稳定状态。）

如果存在风向，那么雨滴将是斜着掉落/滑落的。

我们的代码不会去试图完美模拟这些特征，因为在一个快速变换的环境中人眼留意的是总体印象和感觉。

我们将去除一些不必要的复杂性，比如暂不考虑环境折射，另外我们把雨滴降低维度在2D空间上，简化为一个运动的小圆点（在三维空间是一个椭球体），它包含大小、位置、速度、加速度属性，这样在计算雨点距离时只需要考虑x、y轴分量，而求体积也退化为求面积。

创建雨景容器

我们首先创建一个场景视图对象来容纳背景（远景图片）、玻璃窗户（我们的观察点）和雨滴：

function RainyView(options, canvas) { this.img = options.image;//背景图片 this.options = options;//参数 this.drops = [];//一组雨滴 // 创建canvas容器，用来绘制对象和动画 this.canvas = canvas || this.prepareCanvas(); this.prepareBackground();//创建背景 this.prepareGlass();//创建窗户 // 设置window.requestAnimFrame动画方法 this.setRequestAnimFrame(); }

其中setRequestAnimFrame方法实现了requestAnimFrame接口，这个是比setTimeout更好的动画绘制接口，在Canvas按钮绕边动画一文中已有详细说明。

创建背景 RainyView.prototype.prepareBackground = function() { this.background = document.createElement('canvas'); this.background.width = this.canvas.width; this.background.height = this.canvas.height; var context = this.background.getContext('2d'); context.clearRect(0, 0, this.canvas.width, this.canvas.height); context.drawImage(this.img, this.options.crop[0], this.options.crop[1], this.options.crop[2], this.options.crop[3], 0, 0, this.canvas.width, this.canvas.height); //blur the background ... };

上面的代码创建一个background的canvas，然后把图像绘制在上面，由于是远景图并且是透过玻璃看出去的，我们需要给图片添加模糊效果，这个有很多方法，比如CSS3的blur、scale方法，以及使用JS的一些基于像素处理的模糊算法，比如相邻像素的混合算法、高斯模糊、栈模糊算法。这不是本文的重点，不做进一步细述。

创建窗户 RainyView.prototype.prepareGlass = function() { this.glass = document.createElement('canvas'); this.glass.width = this.canvas.width; this.glass.height = this.canvas.height; this.context = this.glass.getContext('2d'); };

这个比较简单，使用一个新的canvas上下文来绘制窗户。

创建雨滴 /** * 定义一个雨滴对象 * @param RainyView 雨滴的父容器 * @param centerX 雨滴中心的x坐标 * @param centerY 雨滴中心的y坐标 * @param min 最小尺寸 * @param base 随机尺寸基准 */ function Drop(RainyView, centerX, centerY, min, base) { this.x = Math.floor(centerX); this.y = Math.floor(centerY); this.r = (Math.random() * base) + min; this.RainyView = RainyView; this.context = RainyView.context; this.reflection = RainyView.reflected; }

你可以看到雨滴的大小是随机生成的，介于min和min+base之间。

雨滴对象除了上述的属性外，还有两个核心的方法：绘制和移动（滑落）。

Drop.prototype.draw = function() { this.context.save();//保存画板绘图状态 this.context.beginPath(); this.context.arc(this.x, this.y, this.r, 0, Math.PI * 2, true); this.context.closePath(); if (this.RainyView.reflection) { this.RainyView.reflection(this); } this.context.restore();//恢复画板绘图状态 }; Drop.prototype.move = function() { if (this.terminate) { return false; } var stopped = this.RainyView.gravity(this); if (!stopped && this.RainyView.trail) { this.RainyView.trail(this); } if (this.RainyView.options.enableCollisions) { var collisions = this.RainyView.matrix.update(this, stopped); if (collisions) { this.RainyView.collision(this, collisions); } } return !stopped || this.terminate; };

上述draw方法就是绘制一个半径为r的圆，为了简单起见，暂未考虑当两个Drop对象由于接近而融合时所产生的变形。move方法完成两个任务，一个是重力掉落（gravity函数），另外一个功能是碰撞检测（当发生碰撞时，触发融合）。由于这两个方法和环境有关，所以这里实现为其容器RainyView的方法。

到此，我们就完成了雨景布局和基本对象构建，接下去就是要为对象添加实际的动画。

我们在第2部分进行详细描述。