国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

玩別人玩剩下的：canvas大雪紛飛

printempw / 1454人閱讀

摘要：改變雪花的坐標(biāo)，在短時(shí)間內(nèi)重繪一次，然后不斷重復(fù)此過(guò)程，為了照顧瀏覽器爸爸的感受，超出畫(huà)布邊界的時(shí)候把雪花清除掉。

canvas大雪紛飛

前言：正好業(yè)務(wù)觸及到canvas，看完api順手寫(xiě)個(gè)雪花效果，因?yàn)橹翱吹竭^(guò)很多次這個(gè)，主要看思路，想象力好的可以慢慢去創(chuàng)作屬于自己的canvas效果

思路：

利用畫(huà)圓arc()和環(huán)形漸變色createRadialGradient()畫(huà)一個(gè)雪花的模型（想要更好看的模型可以用圖片代替）

    var grd = this.canvas.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.r);
    grd.addColorStop(0, "rgba(255,255,255,1)");
    grd.addColorStop(1, "rgba(255,255,255,0.2)");
    this.canvas.fillStyle = grd;
    this.canvas.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
    this.canvas.fill();

效果圖

如何讓canvas畫(huà)布上的點(diǎn)移動(dòng)

動(dòng)畫(huà)其實(shí)就是一幀一幀的畫(huà)面的組合，在一定時(shí)間內(nèi)把畫(huà)面從第一幀切換到第二幀到第n幀這個(gè)過(guò)程就是動(dòng)畫(huà)
弄懂這個(gè)道理，讓雪花動(dòng)起來(lái)就很簡(jiǎn)單了，重繪。
改變雪花的x,y坐標(biāo)，在短時(shí)間內(nèi)重繪一次，然后不斷重復(fù)此過(guò)程，為了照顧瀏覽器爸爸的感受，x,y超出畫(huà)布邊界的時(shí)候把雪花清除掉。

    setInterval(() => {
        arr[0].canvas.clearRect(0, 0, maxW, maxH);
        for(var i = 0; i < arr.length; i++) {
            if(arr[i].y >= maxH){
                //清除超出下邊界的雪花
                continue;
            }
            arr[i].play();
        }
    }, 30);

    play: function() {
        this.x += this.speedX;
        this.y += this.speedY;
        if(this.x < this.r) {
            this.speedX = Math.abs(this.speedX);
        }
        if(this.y < this.r) {
            this.speedY = Math.abs(this.speedY);
        }
        this.canvas.beginPath();
        var grd = this.canvas.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.r);
        grd.addColorStop(0, "rgba(255,255,255,1)");
        grd.addColorStop(1, "rgba(255,255,255,0.2)");
        this.canvas.fillStyle = grd;
        this.canvas.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
        this.canvas.fill();
    }

最后一步就是創(chuàng)建一個(gè)個(gè)雪花實(shí)例去執(zhí)行動(dòng)畫(huà)了

    var snow = function() {
        this.x = this.rand(maxW);
        this.y = 0;
        this.r = this.rand(10);
        this.speedX = this.getRanNum(-5, 5);
        this.speedY = this.getRanNum(10, 20);
        this.width = 0;
        this.height = 0;
        this.canvas = {};
        this.init();
    }
    var arr = [];
    setInterval(() => {
        for(let i = 0; i < 10; i++) {
            arr.push(new snow());
        }
    }, 30);

效果預(yù)覽

完整代碼

最后，每幾個(gè)canvas的方法組合一下做個(gè)小效果，慢慢的就可以做大型炫酷效果了，當(dāng)然，炫酷效果離不開(kāi)一些常用或生僻的數(shù)學(xué)知識(shí)，各類算法，方法，相關(guān)插件（我說(shuō)的插件是用來(lái)計(jì)算一些東西或者圖形之類的，不是用插件畫(huà)canvas）作為鋪墊
敲黑板，希望路過(guò)的大神能介紹一些canvas進(jìn)階需要學(xué)習(xí)的一些知識(shí)點(diǎn)，小弟不勝感激~

版權(quán)所有，轉(zhuǎn)載請(qǐng)注明出處~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/90097.html

相關(guān)文章

  • 【算法日積月累】0-寫(xiě)在前面的話

    摘要：現(xiàn)在發(fā)出來(lái)的版本，我重新使用了語(yǔ)言實(shí)現(xiàn)。其實(shí)我之前介紹的老師課程也大量參考和使用算法這本書(shū)上的思路和例題。看這本書(shū)主要是讓我覺(jué)得算法可以以比較輕松的方式入門(mén)。劍指這本書(shū)主要用于準(zhǔn)備算法面試，在網(wǎng)絡(luò)上備受好評(píng)。 我是一個(gè)半路出家的程序員，在我剛開(kāi)始從事編碼工作的頭幾年，我沒(méi)有接觸過(guò)算法和數(shù)據(jù)結(jié)構(gòu)，覺(jué)得它們是只會(huì)在我找工作的時(shí)候用得到的知識(shí)。盡管有很多人跟我說(shuō)過(guò)算法和數(shù)據(jù)結(jié)構(gòu)無(wú)比重要，我也...

    flybywind 評(píng)論0 收藏0

  • 程序員，職場(chǎng)上請(qǐng)遠(yuǎn)離這種人！

    摘要：隨著微信和的不斷普及，現(xiàn)在微信和留言也已經(jīng)成為了甩鍋?zhàn)C據(jù)的一部分，經(jīng)常郵件里面大量粘貼微信聊天截圖，職場(chǎng)上的宮心斗不比電視劇里面的差。 對(duì)有些職場(chǎng)人來(lái)講，甩鍋就是一種生存手段。 01.從大學(xué)打籃球說(shuō)起 上大學(xué)的時(shí)候喜歡打籃球，然后我又特別喜歡搶籃板，經(jīng)常是跳起來(lái)的時(shí)候沒(méi)...

    khs1994 評(píng)論0 收藏0

  • 技術(shù)人攻略訪談四十|劉睿民：數(shù)據(jù)庫(kù)戰(zhàn)國(guó)時(shí)代，我不跟你們玩政治！

    摘要：導(dǎo)語(yǔ)本期訪談對(duì)象劉睿民，柏睿數(shù)據(jù)科技。由于計(jì)程車司機(jī)接二連三游行抗議，法國(guó)政府已頒布法令禁用。技術(shù)人攻略為什么會(huì)從數(shù)據(jù)挖掘，轉(zhuǎn)向數(shù)據(jù)庫(kù)引擎研發(fā)后來(lái)發(fā)現(xiàn)，所謂的數(shù)據(jù)挖掘在中國(guó)，很容易走偏。 showImg(https://segmentfault.com/img/bVkGay); 文：Gracia (本文為原創(chuàng)內(nèi)容，部分或全文轉(zhuǎn)載均需經(jīng)過(guò)作者授權(quán)，并保留完整的作者信息和技術(shù)人攻略介紹。...

    ispring 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<