撩妹技能 get，教你用 canvas 畫一場流星雨

時間 2019-11-09

標籤技能 canvas 一場流星雨欄目職業生涯简体版

原文原文鏈接

開始

妹子都喜歡流星，若是她說不喜歡，那她必定是一個假妹子。javascript

如今就一塊兒來作一場流星雨，用程序員的野路子浪漫一下。html

要畫一場流星雨，首先，天然咱們要會畫一顆流星。html5

玩過 canvas 的同窗，你畫圓畫方畫線條這麼 6，若是說叫你畫下面這個玩意兒，你會不會以爲你用的是假 canvas？canvas 沒有畫一個帶尾巴玩意兒的 api 啊。java

畫一顆流星

是的，的倒是沒這個 api，可是不表明咱們畫不出來。流星就是一個小石頭，而後由於速度過快產生大量的熱量帶動周圍的空氣發光發熱，因此經飛過的地方看起來就像是流星的尾巴，咱們先研究一下流星這個圖像，整個流星處於他本身的運動軌跡之中，當前的位置最亮，輪廓最清晰，而以前劃過的地方離當前位置軌跡距離越遠就越暗淡越模糊。git

上面的分析結果很關鍵， canvas 上是每一幀就重繪一次，每一幀之間的時間間隔很短。流星通過的地方會愈來愈模糊最後消失不見，那有沒有可讓畫布畫的圖像每過一幀就變模糊一點而不是所有清除的辦法？若是能夠這樣，就能夠把每一幀用線段畫一小段流星的運動軌跡，最後畫出流星的效果。程序員

騙紙！你也許會說，這那裏像流星了？？？
別急，讓我多畫幾段給你看看。github

什麼？仍是不像？咱們把它畫小點，這下總該像了把？canvas

上面幾幅圖我是在 ps 上模擬的，本質上 ps 也是在畫布上繪畫，咱們立刻在 canvas 上試試。api

那，直接代碼實現一下。dom

// 座標
class Crood {
    constructor(x=0, y=0) {
        this.x = x;
        this.y = y;
    }
    setCrood(x, y) {
        this.x = x;
        this.y = y;
    }
    copy() {
        return new Crood(this.x, this.y);
    }
}

// 流星
class ShootingStar {
    constructor(init=new Crood, final=new Crood, size=3, speed=200, onDistory=null) {
        this.init = init; // 初始位置
        this.final = final; // 最終位置
        this.size = size; // 大小
        this.speed = speed; // 速度：像素/s

        // 飛行總時間
        this.dur = Math.sqrt(Math.pow(this.final.x-this.init.x, 2) + Math.pow(this.final.y-this.init.y, 2)) * 1000 / this.speed; 

        this.pass = 0; // 已過去的時間
        this.prev = this.init.copy(); // 上一幀位置
        this.now = this.init.copy(); // 當前位置
        this.onDistory = onDistory;
    }
    draw(ctx, delta) {
        this.pass += delta;
        this.pass = Math.min(this.pass, this.dur);

        let percent = this.pass / this.dur;

        this.now.setCrood(
            this.init.x + (this.final.x - this.init.x) * percent,
            this.init.y + (this.final.y - this.init.y) * percent
        );

        // canvas
        ctx.strokeStyle = '#fff';
        ctx.lineCap = 'round';
        ctx.lineWidth = this.size;
        ctx.beginPath();
        ctx.moveTo(this.now.x, this.now.y);
        ctx.lineTo(this.prev.x, this.prev.y);
        ctx.stroke();

        this.prev.setCrood(this.now.x, this.now.y);
        if (this.pass === this.dur) {
            this.distory();
        }
    }
    distory() {
        this.onDistory && this.onDistory();
    }
}


// effet
let cvs = document.querySelector('canvas');
let ctx = cvs.getContext('2d');

let T;
let shootingStar = new ShootingStar(
                        new Crood(100, 100), 
                        new Crood(400, 400),
                        3,
                        200,
                        ()=>{cancelAnimationFrame(T)}
                    );

let tick = (function() {
    let now = (new Date()).getTime();
    let last = now;
    let delta;
    return function() {
        delta = now - last;
        delta = delta > 500 ? 30 : (delta < 16? 16 : delta);
        last = now;
        // console.log(delta);

        T = requestAnimationFrame(tick);

        ctx.save();
        ctx.fillStyle = 'rgba(0,0,0,0.2)'; // 每一幀用 「半透明」 的背景色清除畫布
        ctx.fillRect(0, 0, cvs.width, cvs.height);
        ctx.restore();
        shootingStar.draw(ctx, delta);
    }
})();
tick();

效果：一顆流星

sogoyi 快看，一顆活潑不作做的流星!!! 是否是感受動起來更加逼真一點？

流星雨

咱們再加一個流星雨 MeteorShower 類，生成多一些隨機位置的流星，作出流星雨。

// 座標
class Crood {
    constructor(x=0, y=0) {
        this.x = x;
        this.y = y;
    }
    setCrood(x, y) {
        this.x = x;
        this.y = y;
    }
    copy() {
        return new Crood(this.x, this.y);
    }
}

// 流星
class ShootingStar {
    constructor(init=new Crood, final=new Crood, size=3, speed=200, onDistory=null) {
        this.init = init; // 初始位置
        this.final = final; // 最終位置
        this.size = size; // 大小
        this.speed = speed; // 速度：像素/s

        // 飛行總時間
        this.dur = Math.sqrt(Math.pow(this.final.x-this.init.x, 2) + Math.pow(this.final.y-this.init.y, 2)) * 1000 / this.speed; 

        this.pass = 0; // 已過去的時間
        this.prev = this.init.copy(); // 上一幀位置
        this.now = this.init.copy(); // 當前位置
        this.onDistory = onDistory;
    }
    draw(ctx, delta) {
        this.pass += delta;
        this.pass = Math.min(this.pass, this.dur);

        let percent = this.pass / this.dur;

        this.now.setCrood(
            this.init.x + (this.final.x - this.init.x) * percent,
            this.init.y + (this.final.y - this.init.y) * percent
        );

        // canvas
        ctx.strokeStyle = '#fff';
        ctx.lineCap = 'round';
        ctx.lineWidth = this.size;
        ctx.beginPath();
        ctx.moveTo(this.now.x, this.now.y);
        ctx.lineTo(this.prev.x, this.prev.y);
        ctx.stroke();

        this.prev.setCrood(this.now.x, this.now.y);
        if (this.pass === this.dur) {
            this.distory();
        }
    }
    distory() {
        this.onDistory && this.onDistory();
    }
}

class MeteorShower {
    constructor(cvs, ctx) {
        this.cvs = cvs;
        this.ctx = ctx;
        this.stars = [];
        this.T;
        this.stop = false;
        this.playing = false;
    }

    createStar() {
        let angle = Math.PI / 3;
        let distance = Math.random() * 400;
        let init = new Crood(Math.random() * this.cvs.width|0, Math.random() * 100|0);
        let final = new Crood(init.x + distance * Math.cos(angle), init.y + distance * Math.sin(angle));
        let size = Math.random() * 2;
        let speed = Math.random() * 400 + 100;
        let star = new ShootingStar(
                        init, final, size, speed, 
                        ()=>{this.remove(star)}
                    );
        return star;
    }

    remove(star) {
        this.stars = this.stars.filter((s)=>{ return s !== star});
    }

    update(delta) {
        if (!this.stop && this.stars.length < 20) {
            this.stars.push(this.createStar());
        }
        this.stars.forEach((star)=>{
            star.draw(this.ctx, delta);
        });
    }

    tick() {
        if (this.playing) return;
        this.playing = true;

        let now = (new Date()).getTime();
        let last = now;
        let delta;

        let  _tick = ()=>{
            if (this.stop && this.stars.length === 0) {
                cancelAnimationFrame(this.T);
                this.playing = false;
                return;
            }

            delta = now - last;
            delta = delta > 500 ? 30 : (delta < 16? 16 : delta);
            last = now;
            // console.log(delta);

            this.T = requestAnimationFrame(_tick);

            ctx.save();
            ctx.fillStyle = 'rgba(0,0,0,0.2)'; // 每一幀用 「半透明」 的背景色清除畫布
            ctx.fillRect(0, 0, cvs.width, cvs.height);
            ctx.restore();
            this.update(delta);
        }
        _tick();
    }

    start() {
        this.stop = false;
        this.tick();
    }

    stop() {
        this.stop = true;
    }  
}

// effet
let cvs = document.querySelector('canvas');
let ctx = cvs.getContext('2d');

let meteorShower = new MeteorShower(cvs, ctx);
meteorShower.start();

效果：流星雨

透明背景

先不急着激動，這個流星雨有點單調，能夠看到上面的代碼中，每一幀，咱們用了透明度爲 0.2 的黑色刷了一遍畫布，背景漆黑一片，若是說咱們的需求是透明背景呢？

好比，咱們要用這個夜景圖片作背景，而後在上面加上咱們的流星，咱們每一幀刷一層背景的小伎倆就用不了啦。由於咱們要保證除開流星以外的部分，應該是透明的。

這裏就要用到一個冷門的屬性了，globalCompositeOperation，全局組合操做？原諒我放蕩不羈的翻譯。
這個屬性其實就是用來定義後繪製的圖形與先繪製的圖形之間的組合顯示效果的。
他能夠設置這些值

這些屬性說明不必仔細看，更不用記下來，直接看 api 示例運行效果就很清楚了。示例裏，先繪製的是填充正方形，後繪製的是填充圓形。

是否是豁然開朗，一目瞭然？

對於咱們來講，原圖像是每一幀畫完的全部流星，目標圖像是畫完流星以後半透明覆蓋畫布的黑色矩形。而咱們每一幀要保留的就是，上一幀 0.8 透明度的流星，覆蓋畫布黑色矩形咱們不能顯示。

注意這裏的 destination-out 和 destination-in，示例中這兩個屬性最終都只有部分源圖像保留了下來，符合咱們只要保留流星的需求。我以爲 w3cschool 上描述的不是很正確，我用我本身的理解歸納一下。

destination-in ：只保留了源圖像（矩形）和目標圖像（圓）交集區域的源圖像
destination-out：只保留了源圖像（矩形）減去目標圖像（圓）以後區域的源圖像

上述示例目標圖像的透明度是 1，源圖像被減去的部分是徹底不見了。而咱們想要的是他能夠按照目標透明度進行部分擦除。改一下示例裏的代碼看看是否支持半透明的計算。

看來這個屬性支持半透明的計算。源圖像和目標圖像交疊的部分以半透明的形式保留了下來。也就是說若是咱們要保留 0.8 透明度的流星，能夠這樣設置 globalCompositeOperation

ctx.fillStyle = 'rgba(0,0,0,0.8)'
globalCompositeOperation = 'destination-in';
ctx.fillRect(0, 0, cvs.width, cvs.height);


// 或者
ctx.fillStyle = 'rgba(0,0,0,0.2)'
globalCompositeOperation = 'destination-out';
ctx.fillRect(0, 0, cvs.width, cvs.height);