Canvas繪製星光閃爍的生日祝福

描述

7月7日是個人生日，在期待生日到來的這些天，我用canvas給本身畫了生日祝福。以爲效果還不錯，因此分享一下實現的原理。

整個畫面分爲兩部分，一部分是氣球，一部分是生日祝福語，氣球和生日祝福語都是以動畫的方式逐漸顯現出來的。

演示

實現

繪製星星匯聚爲文字

首先是星星組成的文字，星星是從散亂的各個位置逐步運動到相應的位置組成祝福語的，初始位置比較簡單，隨機n個點就能夠了：

const randomStartPoints = [];
for(let i = 0;i< texts.length * 100; i++) {
    randomStartPoints.push({
        x: random(0, CANVAS_WIDTH),
        y: random(0, CANVAS_HEIGHT)
    });
}
複製代碼

把初始的點放到一個數組中，每一個文字用100個星星來組成。random是lodash的函數。

結束位置由於沒啥規律，因此用表的方式來存儲下來，好比拿「光」來舉栗子：

'光': [
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 1, 0, 1, 0, 1, 0, 0, 0],
    [0, 0, 1, 0, 1, 0, 1, 0, 0, 0],
    [0, 0, 0, 1, 1, 1, 0, 0, 0, 0],
    [0, 1, 1, 1, 1, 1, 1, 1, 0, 0],
    [0, 0, 0, 1, 0, 1, 0, 0, 0, 0],
    [0, 0, 0, 1, 0, 1, 0, 0, 0, 0],
    [0, 0, 0, 1, 0, 1, 0, 1, 0, 0],
    [0, 1, 1, 1, 0, 1, 1, 1, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
],
複製代碼

我把用到的「光」「生」「日」「快」「樂」這幾個字的位置都用這種方式存儲起來了。

以後用它們來生成結束文字的點：

const endPoints = [];
texts.forEach((text, index) => {
    const lines =  dotText[text]
    const translateX = GRID_SIZE * 10 * index;

    for(let i = 0; i < lines.length; i ++) {
        for(let j = 0; j < lines[i].length; j ++) {
            if(lines[i][j]) {
                endPoints.push({
                    x: translateX + j * GRID_SIZE,
                    y: i * GRID_SIZE
                });
            }
        }
    }
})
複製代碼

texts爲那幾個文字的數組，GRID_SIZE是每一個單元格的大小，由於文字要排成一列，因此每一個文字都要根據index來計算translateX。

起點和終點都有了，剩下的就是動畫的信息了。

const animInfos = [];
let currentIndex = 0;
randomStartPoints.forEach(({x, y}) => {
    const { x: endX, y: endY } = endPoints[currentIndex];
    animInfos.push({
        from: { x, y },
        to: { x: endX, y: endY },
        current: { x, y },
        speed: { x: (endX - x) / ANIM_TIMES, y: (endY - y) / ANIM_TIMES }
    });
    currentIndex = (currentIndex + 1) % endPoints.length;
});
複製代碼

循環startPoints的數組，把每個點分配相應的結束點，循環分配的，每一個文字100個星星。而後動畫的每一個點的from、to、current就有了，speed是使用運動距離 / 運動次數來算的，運動次數ANIM_TIEMS是一個常量，設置爲了20。

動畫的信息有了，接下來就是動以及繪製。

設置了ANIM_TIEMS次運動完，每次新位置的計算間隔ANIM_INTERVAl毫秒，我設置爲了100。使用定時器沒100ms計算一次新位置。

current.x = current.x + speed.x;
current.y = current.y + speed.y;
複製代碼

而後運動到結束位置以後，我但願星星依然有微小的運動，

speed.x = -speed.x;
speed.y = -speed.y;
current.x = current.x + speed.x;
current.y = current.y + speed.y;
複製代碼

判斷到達結束位置是使用差值來算的，當current和to這倆點的位置偏差小於ERROR_RANGE時，就標記爲達到了目標位置，而後記一個flag。

Math.abs(current.x - to.x) <= ERROR_RANGE && Math.abs(current.y - to.y) <= ERROR_RANGE
複製代碼

計算部分的總體代碼以下：

const animEndFlags = [];
setInterval(() => {
    animInfos.forEach(({ to, current, speed }, index) => {
        if (animEndFlags[index]) {
            speed.x = -speed.x;
            speed.y = -speed.y;
        } else if ( Math.abs(current.x - to.x) <= ERROR_RANGE && Math.abs(current.y - to.y) <= ERROR_RANGE ) {
            speed.x = random(1, -1);
            speed.y = random(1, -1);
            animEndFlags[index] = true;
        }
        current.x = current.x + speed.x;
        current.y = current.y + speed.y;
    });
}, ANIM_INTERVAL);
複製代碼

在計算的同時要進行繪製，繪製相關的定時器用requestAnimationFrame，這個會根據瀏覽器的幀率來自動調節執行頻率。

const renderAll = () => {
    ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
    animInfos.forEach(({ current }) => {
        ctx.drawImage(icon, current.x, current.y, GRID_SIZE, GRID_SIZE); 
    });
    requestAnimationFrame(renderAll);
}
requestAnimationFrame(renderAll);
複製代碼

其中icon也是用canvas來繪製的,就是4條線😂，橫、豎、左斜、右斜。

drawStar(ctx, scale, color = '#ffd700') {
    ctx.save();
    ctx.clearRect(0, 0, 100, 100);
    ctx.strokeStyle = color;
    ctx.scale(scale, scale);
    ctx.beginPath();
    ctx.moveTo(0, 10);
    ctx.lineTo(20, 10);
    ctx.moveTo(10, 0);
    ctx.lineTo(10, 20);
    ctx.moveTo(5, 5);
    ctx.lineTo(15, 15);   
    ctx.moveTo(5, 15);
    ctx.lineTo(15, 5);
    ctx.closePath();
    ctx.stroke();
    ctx.restore();
}
複製代碼

爲了有種閃爍的感受，星星是不斷改變大小的：

const repaintIcon = () => {
    this.drawStar(ctxStar, random(0.9, 1.0));
    setTimeout( repaintIcon,random(200, 800));
}
setTimeout(repaintIcon, 100);
複製代碼

emmm.如今羣星匯聚爲祝福語的效果就實現了，撒花~~

繪製氣球花邊

接下來就要畫氣球了，其實思路也差很少啦，位置能夠動態算出來，我偷了了一個懶，也用的打表的方式。

'~': [
    [1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1],
    [0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0],
    [0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0]
  ]
複製代碼

const balloonPoints = []
const balloonLines = dotText['~'];
for(var j = 0; j< balloonLines[0].length; j ++) {
    for(var i = 0; i < balloonLines.length; i ++ ){
        if(balloonLines[i][j]) {
            balloonPoints.push( { x:j * GRID_SIZE, y:i * GRID_SIZE} );
        }
    }
}
複製代碼

但這裏也不是一會兒所有繪製出來的，作成了從左到右依次繪製的效果。就是一個繪製完隔一段時間繪製下一個，我取名叫renderBalloonOneByOne，其中BALLOON_PAINT_INTERVAL常量就是繪製的時間間隔。

const renderBalloonOneByOne = (curIndex) => {
    if( balloonPoints[curIndex]) {
        const { x, y } = balloonPoints[curIndex];
        this.drawBalloon(ctxBalloons2, x, y, random(0, 255), random(0, 255), random(0, 255));

        setTimeout(() => {
            curIndex += 1;
            renderBalloonOneByOne(curIndex);
        }, BALLOON_PAINT_INTERVAL);
    }
}
renderBalloonOneByOne(0);
複製代碼

而後氣球每一個氣球固然也是本身畫的啦，此次方式和畫星星還不一樣，星星是如今canvas上繪製出來，而後把這個canvas用drawImage繪製到目標位置。這裏換了一種方式，直接在目標位置繪製的。這樣繪製的時候就要計算x和y了。

drawBalloon(ctx, x, y, r, g, b){
    var gradient=ctx.createRadialGradient(x + GRID_SIZE / 3, y + GRID_SIZE / 3, 0, x + GRID_SIZE / 2, y + GRID_SIZE / 2, GRID_SIZE);
    gradient.addColorStop(0,"rgba(255, 255, 255, 1)");            
    gradient.addColorStop(0.4,`rgba(${r}, ${g}, ${b}, 1)`);
    ctx.fillStyle= gradient;
    ctx.beginPath();
    ctx.arc(x + GRID_SIZE / 2, y + GRID_SIZE / 2, GRID_SIZE / 2, 0, Math.PI * 2 );
    ctx.closePath();
    ctx.fill();
}
複製代碼

由於顏色隨機，因此傳入了r、g、b，首先用arc畫一個圓，而後填充爲一個漸變色，圓心在1/3的左上角，從透明度0到透明度0.4漸變。beginPath和closePath必定都要有，否則會連成一片的。

emmm..氣球畫的我以爲還挺像的。

所用的canvas

星星、氣球、文字、氣球花邊的繪製邏輯就是這樣的，不過是在若干個canvas上，文字是獨立的一個，星星也是，而後氣球直接繪製在目標位置因此也是一個，但上下都有就兩個了。因此canvas有這些：

<div class="dazzle-text">
    <!---->
    <canvas ref="canBalloons1" width=1220 height=60></canvas>
    <canvas ref="can" width=1200 height=200></canvas>
    <canvas ref="canBalloons2" width=1220 height=60></canvas>
    <!--star-->
    <canvas class="hide-icon" ref="canStar" width=20 height=20></canvas>
</div>
複製代碼

其餘

7月7日，也就是今天就是個人生日啦，玩去了~~

源碼放下面了，須要的話自取~

源碼連接

happy-birthday-guangguang