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

printempw 發布于2019-08-21 17:51 / 1466人閱讀

摘要：改變雪花的坐標，在短時間內重繪一次，然后不斷重復此過程，為了照顧瀏覽器爸爸的感受，超出畫布邊界的時候把雪花清除掉。

canvas大雪紛飛

前言：正好業務觸及到canvas，看完api順手寫個雪花效果，因為之前看到過很多次這個，主要看思路，想象力好的可以慢慢去創作屬于自己的canvas效果

思路：

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

    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畫布上的點移動

動畫其實就是一幀一幀的畫面的組合，在一定時間內把畫面從第一幀切換到第二幀到第n幀這個過程就是動畫
弄懂這個道理，讓雪花動起來就很簡單了，重繪。
改變雪花的x,y坐標，在短時間內重繪一次，然后不斷重復此過程，為了照顧瀏覽器爸爸的感受，x,y超出畫布邊界的時候把雪花清除掉。

    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();
    }

最后一步就是創建一個個雪花實例去執行動畫了

    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);

效果預覽

完整代碼

最后，每幾個canvas的方法組合一下做個小效果，慢慢的就可以做大型炫酷效果了，當然，炫酷效果離不開一些常用或生僻的數學知識，各類算法，方法，相關插件（我說的插件是用來計算一些東西或者圖形之類的，不是用插件畫canvas）作為鋪墊
敲黑板，希望路過的大神能介紹一些canvas進階需要學習的一些知識點，小弟不勝感激~

云服務器 GPU云服務器兩個人語音玩的游戲最好玩的編程語言可以玩捕魚的云主機能玩主機游戲的云游戲

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90097.html

【算法日積月累】0-寫在前面的話

摘要：現在發出來的版本，我重新使用了語言實現。其實我之前介紹的老師課程也大量參考和使用算法這本書上的思路和例題。看這本書主要是讓我覺得算法可以以比較輕松的方式入門。劍指這本書主要用于準備算法面試，在網絡上備受好評。我是一個半路出家的程序員，在我剛開始從事編碼工作的頭幾年，我沒有接觸過算法和數據結構，覺得它們是只會在我找工作的時候用得到的知識。盡管有很多人跟我說過算法和數據結構無比重要，我也...

flybywind 2019-07-31 11:21 評論0 收藏0
程序員，職場上請遠離這種人！

摘要：隨著微信和的不斷普及，現在微信和留言也已經成為了甩鍋證據的一部分，經常郵件里面大量粘貼微信聊天截圖，職場上的宮心斗不比電視劇里面的差。對有些職場人來講，甩鍋就是一種生存手段。 01.從大學打籃球說起上大學的時候喜歡打籃球，然后我又特別喜歡搶籃板，經常是跳起來的時候沒...

khs1994 2021-09-02 15:21 評論0 收藏0
技術人攻略訪談四十|劉睿民：數據庫戰國時代，我不跟你們玩政治！

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

ispring 2019-06-25 18:14 評論0 收藏0