如何基于Canvas来模拟真实雨景Part1:预备知识和创建基本对象
我们之前使用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部分进行详细描述。
- 相关文章
WebAssembly工作原理和JavaScript语言性能对比分析
本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...
WebGL Roadmap
Unity 5.0 shipped with a working preview of our WebGL technology in March this year. Since then, Google has disabled (by default) NPAPI support in the...
JavaScript语言多编程范式简介
和C++等语言类似,JS支持多范式(paradigms)编程。我们常常混合这些范式来完成一些大型Web项目。JS支持3种编程范式:命令式、面向对象和函数式。命令式(Imperative JavaScript)命令式就是简单的从上而下完成任务,流水账过程式编码风格:function
常见面试题JavaScript闭包(ES5语法)
JavaScript闭包(Closure)是常见的JS面试题,是否理解闭包是一个简单的区分JS初级和高级程序员的判例。几乎每个JS程序员都在使用闭包,有意或无意间。比如编写一个jQuery鼠标点击处理函数:$(function()
HTML5、Hybrid APP、Native APP对比和技术选型
HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能,搞出来一些混合APP的解决方案。比如Apache的Cordova(也就是以前的PhoneGap),...
纹理基础知识和过滤模式详解
1、 为什么在纹理采样时需要texture filter(纹理过滤)。
我们的纹理是要贴到三维图形表面的,而三维图形上的pixel中心和纹理上的texel中心并不一至(pixe...如何实现SVG clipPath自适应被裁剪对象
CSS3中引入的clip-path(裁剪路径)属性是一个很强大的特性。
clip-path的含义如下图所示,好比剪纸一样,你用剪刀沿着某条路径把目标对象(图像或元素)裁...WebGL入门教程4 - 使用纹理贴图(Texture Map)
3D建模和纹理贴图的关系就好比人体和皮肤(或着装)的关系,3D建模用来处理空间属性,而贴图适合用来处理细腻的表面属性。如果不使用贴图,而想在表面达到足够的...
如何使用WebGL创建一个逼真的下雨动画
之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行36...
WebGL入门教程1 - 3D绘图基础知识
现代浏览器努力使得Web用户体验更为丰富,而WebGL正处于这样的技术生态系统的中心位置。其应用范围覆盖在线游戏、大数据可视化、计算机辅助设计、虚拟现实以及数...
使用Canvas绘制完美的不完美圆形
真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...
Three.js 开发基础知识 - 绘制3D对象
Three.js是一个用来简化WebGL开发的JavaScript库,比如绘制一个三维立方体,使用WebGL需要100多行,那Three.js只要10几行就能够完成。本文通过创建一个立方体来...
如何使用纯CSS3实现一个3D泡沫
要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识。我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。泡沫首先是一个圆形元素.bubble
在PHP网页程序中执行Sass/Compass命令
我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...
更多...