簡(jiǎn)介
在codepen上看到一個(gè)Canvas做的下雨效果動(dòng)畫(huà)，感覺(jué)蠻有意思的。就研究了下，這里來(lái)分享下，實(shí)現(xiàn)技巧。
效果截圖：
Canvas動(dòng)畫(huà)基礎(chǔ)
大家都知道，Canvas其實(shí)只是一個(gè)畫(huà)板。我們可以應(yīng)用canvas的api在上面繪制各種圖形。
Canvas 2D 的API：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
那么Canvas繪制動(dòng)畫(huà)的步驟就是：
- 繪制第一幀圖形（利用API繪圖）
- 清空畫(huà)板(應(yīng)用clearRect()或fillRect())
- 繪制下一幀動(dòng)畫(huà)
用什么來(lái)控制動(dòng)畫(huà)每一幀的繪制時(shí)間呢？大家很容易想到 window.setInterval()和window.setTimeout()。沒(méi)錯(cuò)用這兩個(gè)也可以。除此之外，后來(lái)又出現(xiàn)一個(gè)新的方法：window.requestAnimationFrame(callback)。
requestAnimationFrame會(huì)告訴瀏覽器你要繪制一個(gè)動(dòng)畫(huà)。讓瀏覽器要重繪時(shí)調(diào)用你指定的方法（callback）來(lái)繪制你的動(dòng)畫(huà)。
使用方法如下：
function anim() {
ctx.fillStyle = clearColor;
ctx.fillRect(0,0,w,h);
for(var i in drops){
drops[i].draw();
}
requestAnimationFrame(anim);
}
一般情況下優(yōu)先使用requestAnimationFrame能保持動(dòng)畫(huà)繪制的頻率和瀏覽器重繪的頻率一致。不幸的是requestAnimationFrame的兼容性還不是很好。IE9以下和addroid 4.3以下好像不支持這個(gè)屬性。不支持的瀏覽器要用setInterval或setTimeout做兼容。
雨滴下落效果
首先來(lái)講講雨滴下落的效果如何制作。雨滴其實(shí)是一個(gè)長(zhǎng)方形，然后加殘影。殘影的繪制可以說(shuō)是雨滴下落的關(guān)鍵。殘影是通過(guò)在前進(jìn)的方向每一幀都繪制一個(gè)半透明的背景和一個(gè)長(zhǎng)方形,然后前面繪制的圖形疊加產(chǎn)生的效果。由于前進(jìn)方向的圖形最后繪制，所以顯得明亮，后面的圖形疊加的比較多，所以視覺(jué)上減弱。整體看起來(lái)后面的就像殘影。這里繪制具有透明度背景是關(guān)鍵,否則產(chǎn)生不了疊加效果。
那么來(lái)繪制個(gè)雨滴看看。首先準(zhǔn)備一個(gè)畫(huà)板:
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>霓虹雨</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style type="text/css">
.bg {
background: #000;
overflow: hidden;
}
</style>
</head>
<body class="bg">
<canvas id="canvas-club"></canvas>
<script type="text/javascript" src="raindrop.js"></script>
</body>
</html>
我在js文件里繪制動(dòng)畫(huà)（raindrop.js），代碼如下：
var c = document.getElementById("canvas-club");
var ctx = c.getContext("2d");//獲取canvas上下文
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;//設(shè)置canvas寬、高
var clearColor = 'rgba(0, 0, 0, .1)';//畫(huà)板背景,注意最后的透明度0.1 這是產(chǎn)生疊加效果的基礎(chǔ)
function random(min, max) {
return Math.random() * (max - min) + min;
}
function RainDrop(){}
//雨滴對(duì)象 這是繪制雨滴動(dòng)畫(huà)的關(guān)鍵
RainDrop.prototype = {
init:function(){
this.x = random(0, w);//雨滴的位置x
this.y = 0;//雨滴的位置y
this.color = 'hsl(180, 100%, 50%)';//雨滴顏色 長(zhǎng)方形的填充色
this.vy = random(4, 5);//雨滴下落速度
this.hit = random(h * .8, h * .9);//下落的最大值
this.size = 2;//長(zhǎng)方形寬度
},
draw:function(){
if (this.y < this.hit) {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.size, this.size * 5);//繪制長(zhǎng)方形，通過(guò)多次疊加長(zhǎng)方形，形成雨滴下落效果
}
this.update();//更新位置
},
update:function(){
if(this.y < this.hit){
this.y += this.vy;//未達(dá)到底部，增加雨滴y坐標(biāo)
}else{
this.init();
}
}
};
function resize(){
w = c.width = window.innerWidth;
h = c.height = window.innerHeight;
}
//初始化一個(gè)雨滴
var r = new RainDrop();
r.init();
function anim() {
ctx.fillStyle = clearColor;//每一幀都填充背景色
ctx.fillRect(0,0,w,h);//填充背景色，注意不要用clearRect，否則會(huì)清空前面的雨滴，導(dǎo)致不能產(chǎn)生疊加的效果
r.draw();//繪制雨滴
requestAnimationFrame(anim);//控制動(dòng)畫(huà)幀
}
window.addEventListener("resize", resize);
//啟動(dòng)動(dòng)畫(huà)
anim();
漣漪效果
接著來(lái)繪制漣漪效果。與繪制雨滴的方式類(lèi)似,也是通過(guò)具有透明度的背景來(lái)疊加前面的圖像產(chǎn)生內(nèi)陰影的效果。
代碼如下（rippling.js）：
var c = document.getElementById("canvas-club");
var ctx = c.getContext("2d");//獲取canvas上下文
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;//設(shè)置canvas寬、高
var clearColor = 'rgba(0, 0, 0, .1)';//畫(huà)板背景,注意最后的透明度0.1 這是產(chǎn)生疊加效果的基礎(chǔ)
function random(min, max) {
return Math.random() * (max - min) + min;
}
function Rippling(){}
//漣漪對(duì)象 這是漣漪動(dòng)畫(huà)的主要部分
Rippling.prototype = {
init:function(){
this.x = random(0,w);//漣漪x坐標(biāo)
this.y = random(h * .8, h * .9);//漣漪y坐標(biāo)
this.w = 2;//橢圓形漣漪寬
this.h = 1;//橢圓漣漪高
this.vw = 3;//寬度增長(zhǎng)速度
this.vh = 1;//高度增長(zhǎng)速度
this.a = 1;//透明度
this.va = .96;//漣漪消失的漸變速度
},
draw:function(){
ctx.beginPath();
ctx.moveTo(this.x, this.y - this.h / 2);
//繪制右弧線(xiàn)
ctx.bezierCurveTo(
this.x + this.w / 2, this.y - this.h / 2,
this.x + this.w / 2, this.y + this.h / 2,
this.x, this.y + this.h / 2);
//繪制左弧線(xiàn)
ctx.bezierCurveTo(
this.x - this.w / 2, this.y + this.h / 2,
this.x - this.w / 2, this.y - this.h / 2,
this.x, this.y - this.h / 2);
ctx.strokeStyle = 'hsla(180, 100%, 50%, '+this.a+')';
ctx.stroke();
ctx.closePath();
this.update();//更新坐標(biāo)
},
update:function(){
if(this.a > .03){
this.w += this.vw;//寬度增長(zhǎng)
this.h += this.vh;//高度增長(zhǎng)
if(this.w > 100){
this.a *= this.va;//當(dāng)寬度超過(guò)100，漣漪逐漸變淡消失
this.vw *= .98;//寬度增長(zhǎng)變緩慢
this.vh *= .98;//高度增長(zhǎng)變緩慢
}
} else {
this.init();
}
}
};
function resize(){
w = c.width = window.innerWidth;
h = c.height = window.innerHeight;
}
//初始化一個(gè)漣漪
var r = new Rippling();
r.init();
function anim() {
ctx.fillStyle = clearColor;
ctx.fillRect(0,0,w,h);
r.draw();
requestAnimationFrame(anim);
}
window.addEventListener("resize", resize);
//啟動(dòng)動(dòng)畫(huà)
anim();
總結(jié)
這樣大家對(duì)整個(gè)下雨效果的制作方法，應(yīng)該有一定的了解了。Canvas用來(lái)繪制動(dòng)畫(huà)的效果確實(shí)能讓人眼前一亮，讓web的視覺(jué)效果提升一大截。發(fā)動(dòng)自己的智慧，相信能做出更多奇妙的動(dòng)畫(huà)。這是我越來(lái)越喜歡web的原因之一吧 O(∩_∩)O~~。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
