1.開(kāi)篇

1.1本文目標(biāo)

本次的實(shí)例是HTML5 Canvas下雨動(dòng)畫(huà)DEMO演示，用到的知識(shí)主要是canvas和一個(gè)js的庫(kù)dat.gui，感覺(jué)這個(gè)庫(kù)老猛了，有空看一下。

2.正文

2.1代碼

首先是canvas繪畫(huà)部分代碼

下雨的繪制：

1 ctx.beginPath();2 var rain_height = Rain.height *dpr;3 for (var i = rain.length - 1; i >= 0; i--) {4 var r =rain[i];5 var real_x = r.x *dpr;6 var real_y = r.y *dpr;7 ctx.moveTo(real_x, real_y);8 ctx.lineTo(real_x - demo.wind * r.z * dpr * 1.5, real_y -

9 rain_height *r.z);10 }11 ctx.lineWidth = Rain.width *dpr;12 ctx.strokeStyle =demo.rain_color;13 ctx.stroke();

雨水濺開(kāi)水花的繪制：

1 for (var i = drops.length - 1; i >= 0; i--) {2 var d =drops[i];3 var real_x = d.x * dpr -d.radius;4 var real_y = d.y * dpr -d.radius;5 ctx.drawImage(d.canvas, real_x, real_y);6 }

這里記錄幾個(gè)點(diǎn)，首先說(shuō)的是繪制用到的dpr，也就是設(shè)備像素比(devicePixelRatio)，從這里的代碼可以看到，canvas最終繪制的寬高和位置都是要乘以dpr，那照著dpr的公式看canvas繪制的是設(shè)備像素？這里還有點(diǎn)不清楚，先記著。再有就是繪制濺開(kāi)的水花的方法，是每一個(gè)水花的小點(diǎn)都是一個(gè)對(duì)象，并且存有初始化好的canvas，然后用主canvas的drawImage方法進(jìn)行繪制，嗯，記著。

下面是雨水和水花對(duì)象：

雨水Rain：

1 Rain.prototype.init = function() {2 this.y = Math.random() * -100;3 this.z = Math.random() * 0.5 + 0.5;4 this.splashed = false;5 }6 Rain.prototype.recycle = function() {7 demo.rain_pool.push(this);8 }9 //recycle rain particle and create a burst of droplets

10 Rain.prototype.splash = function() {11 if (!this.splashed) {12 this.splashed = true;13 var drops =demo.drops;14 var drop_pool =demo.drop_pool;15

16 for (var i=0; i<16; i++) {17 var drop = drop_pool.pop() || newDrop();18 drops.push(drop);19 drop.init(this.x);20 }21 }22 }

水花Drop：

1 //Droplet definition

2 functionDrop() {3 this.x = 0;4 this.y = 0;5 this.radius = Math.round(Math.random() * 2 + 1) *demo.dpr;6 this.speed_x = 0;7 this.speed_y = 0;8 this.canvas = document.createElement(‘canvas‘);9 this.ctx = this.canvas.getContext(‘2d‘);10

11 //render once and cache

12 var diameter = this.radius * 2;13 this.canvas.width =diameter;14 this.canvas.height =diameter;15

16 var grd = this.ctx.createRadialGradient(this.radius, this.radius , 1, this.radius, this.radius, this.radius);17 grd.addColorStop(0, demo.rain_color);18 grd.addColorStop(1, demo.rain_color_clear);19 this.ctx.fillStyle =grd;20 this.ctx.fillRect(0, 0, diameter, diameter);21 }22 Drop.prototype.init = function(x) {23 this.x =x;24 this.y =demo.height;25 var angle = Math.random() * Math.PI - (Math.PI * 0.5);26 var speed = Math.random() *Drop.max_speed;27 this.speed_x = Math.sin(angle) *speed;28 this.speed_y = -Math.cos(angle) *speed;29 }30 Drop.prototype.recycle = function() {31 demo.drop_pool.push(this);32 }

首先說(shuō)Rain對(duì)象，對(duì)象內(nèi)部沒(méi)有貼出來(lái)，貼出的是幾個(gè)主要的方法，主要看它的回收機(jī)制recycle方法，只要飛出邊界的雨水都會(huì)回收到rain_pool數(shù)組，而rain數(shù)組的是正在飛的雨水。再看Drop對(duì)象，就是主要看它的canvas設(shè)置了，還有就是init方法里面設(shè)置水平和垂直方向速度的方式，作者數(shù)學(xué)肯定很牛X。

下面是一個(gè)Ticker對(duì)象：

1 var Ticker = (function(){2 var PUBLIC_API ={};3

4 //public

5 //will call function reference repeatedly once registered, passing elapsed time and a lag multiplier as parameters

6 PUBLIC_API.addListener = functionaddListener(fn) {7 if (typeof fn !== ‘function‘) throw(‘Ticker.addListener() requires a function reference passed in.‘);8

9 listeners.push(fn);10

11 //start frame-loop lazily

12 if (!started) {13 started = true;14 queueFrame();15 }16 };17

18 //private

19 var started = false;20 var last_timestamp = 0;21 var listeners =[];22 //queue up a new frame (calls frameHandler)

23 functionqueueFrame() {24 if(window.requestAnimationFrame) {25 requestAnimationFrame(frameHandler);26 } else{27 webkitRequestAnimationFrame(frameHandler);28 }29 }30 functionframeHandler(timestamp) {31 var frame_time = timestamp -last_timestamp;32 last_timestamp =timestamp;33 //make sure negative time isn‘t reported (first frame can be whacky)

34 if (frame_time < 0) {35 frame_time = 17;36 }37 //- cap minimum framerate to 15fps[~68ms] (assuming 60fps[~17ms] as ‘normal‘)

38 else if (frame_time > 68) {39 frame_time = 68;40 }41

42 //fire custom listeners

43 for (var i = 0, len = listeners.length; i < len; i++) {44 listeners[i].call(window, frame_time, frame_time / 16.67);45 }46

47 //always queue another frame

48 queueFrame();49 }50

51 returnPUBLIC_API;52 }());

主要是看requestAnimationFrame，這是一個(gè)繪制動(dòng)畫(huà)的方法，有時(shí)間再去看。傳入的listener就是下面說(shuō)的step。

1 demo.step = function(time, lag) {2 //localize common references

3 var demo =window.demo;4 var speed =demo.speed;5 var width =demo.width;6 var height =demo.height;7 var wind =demo.wind;8 var rain =demo.rain;9 var rain_pool =demo.rain_pool;10 var drops =demo.drops;11 var drop_pool =demo.drop_pool;12

13 //multiplier for physics

14 var multiplier = speed *lag;15

16 //spawn drops

17 demo.drop_time += time *speed;18 while (demo.drop_time >demo.drop_delay) {19 demo.drop_time -=demo.drop_delay;20 var new_rain = rain_pool.pop() || newRain();21 new_rain.init();22 var wind_expand = Math.abs(height / new_rain.speed * wind); //expand spawn width as wind increases

23 var spawn_x = Math.random() * (width +wind_expand);24 if (wind > 0) spawn_x -=wind_expand;25 new_rain.x =spawn_x;26 rain.push(new_rain);27 }28

29 //rain physics

30 for (var i = rain.length - 1; i >= 0; i--) {31 var r =rain[i];32 r.y += r.speed * r.z *multiplier;33 r.x += r.z * wind *multiplier;34 //remove rain when out of view

35 if (r.y >height) {36 //if rain reached bottom of view, show a splash

37 r.splash();38 }39 //recycle rain

40 if (r.y > height + Rain.height * r.z || (wind < 0 && r.x < wind) || (wind > 0 && r.x > width +wind)) {41 r.recycle();42 rain.splice(i, 1);43 }44 }45

46 //splash drop physics

47 var drop_max_speed =Drop.max_speed;48 for (var i = drops.length - 1; i >= 0; i--) {49 var d =drops[i];50 d.x += d.speed_x *multiplier;51 d.y += d.speed_y *multiplier;52 //apply gravity - magic number 0.3 represents a faked gravity constant

53 d.speed_y += 0.3 *multiplier;54 //apply wind (but scale back the force)

55 d.speed_x += wind / 25 *multiplier;56 if (d.speed_x < -drop_max_speed) {57 d.speed_x = -drop_max_speed;58 }else if (d.speed_x >drop_max_speed) {59 d.speed_x =drop_max_speed;60 }61 //recycle

62 if (d.y > height +d.radius) {63 d.recycle();64 drops.splice(i, 1);65 }66 }67

68 demo.draw();69 }

首先是第三段的地方，作者用了一個(gè)巧妙的數(shù)學(xué)方法增加了雨水下落的范圍，主要就是根據(jù)wind風(fēng)速的變化來(lái)調(diào)節(jié)范圍。親自試過(guò)，如果不添加這段代碼，雨水下降的范圍只有屏幕中間的一小部分。第四段是設(shè)置雨水的x、y，第五段是水花的x、y。

最后是事件：

1 //handle interaction

2 demo.mouseHandler = function(evt) {3 demo.updateCursor(evt.clientX, evt.clientY);4 }5 demo.touchHandler = function(evt) {6 evt.preventDefault();7 var touch = evt.touches[0];8 demo.updateCursor(touch.clientX, touch.clientY);9 }10 demo.updateCursor = function(x, y) {11 x /= demo.width;

12 y /= demo.height;

13 var y_inverse = (1 -y);14

15 demo.drop_delay = y_inverse*y_inverse*y_inverse * 100 + 2;16 demo.wind = (x - 0.5) * 50;17 }18

19 document.addEventListener(‘mousemove‘, demo.mouseHandler);20 document.addEventListener(‘touchstart‘, demo.touchHandler);21 document.addEventListener(‘touchmove‘, demo.touchHandler);

主要看的是觸屏的touch事件，evt的touches對(duì)象就是對(duì)多點(diǎn)觸屏的保存。

總結(jié)

繼續(xù)努力吧！

總結(jié)

以上是生活随笔為你收集整理的html下雨代码,(自己看)HTML5 Canvas下雨动画DEMO演示(示例代码)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。