今天就跟大家聊聊有關(guān)使用Canvas怎么繪制一個(gè)下雨動(dòng)畫(huà)，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

10年積累的網(wǎng)站制作、網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶(hù)對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶(hù)得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有蕭縣免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

使用方法如下：

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代碼：

    
    
    
    
        .bg {
            background: #000;
            overflow: hidden;
        }
    

我在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();

看完上述內(nèi)容，你們對(duì)使用Canvas怎么繪制一個(gè)下雨動(dòng)畫(huà)有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

網(wǎng)頁(yè)名稱(chēng)：使用Canvas怎么繪制一個(gè)下雨動(dòng)畫(huà)-創(chuàng)新互聯(lián)
本文路徑：http://weahome.cn/article/ecsji.html