canvas 夢幻的隨機例子效果

效果以下：

step1 繪製一個圓的動態效果

---

var canvas = document.getElementById('canvas1');
var context = canvas.getContext('2d'); //獲取2d環境下的畫布上下文（獲取一個畫筆）
var cX = canvas.width / 2;
var cY = canvas.height / 2;
var r = 10;

setInterval(function() {
    context.beginPath();
    cX += 2;
    cY += 2;
    context.arc(cX, cY, r, 0, 2 * Math.PI);
    context.fillStyle = 'red';
    context.fill();
}, 1000 / 20);
複製代碼

以上代碼存在一個問題，即畫出來的圓不斷生成

解決辦法:在定時器代碼裏添加清空畫布的操做

context.clearRect(0, 0, canvas.width, canvas.height);
複製代碼

step2 繪製多個圓的動態效果(如下是項目的完整代碼)

---

var canvas = document.getElementById('canvas1');
var context = canvas.getContext('2d'); //獲取2d環境下的畫布上下文（獲取一個畫筆）
var setArr = []; //存放圓形的數組
var maxNum = 30; //生成圓形數量的最大值

/*繪製隨機的圓*/
var timer1 = setInterval(function() {

    /*爲了控制瀏覽器的性能，避免圓形不斷地生成，影響性能*/
    if (setArr.length > maxNum) {
        clearInterval(timer1);
    }

    var cX = 200 + Math.ceil(Math.random() * 400); //生成200-400之間圓的x座標
    var cY = 200 + Math.ceil(Math.random() * 400); //生成200-400之間圓的y座標
    var r = 5 + Math.ceil(Math.random() * 10);  //5-12之間圓的半徑
    /*生成rgba顏色的值*/
    var red = Math.floor(Math.random() * 256); 
    var green = Math.floor(Math.random() * 256);
    var blue = Math.floor(Math.random() * 256);
    var alpha = 0.5 + Math.random() * 0.3;
    var bgColor = 'rgba(' + red + ',' + green + ',' + blue + ',' + alpha + ')';
    /*設置速度*/
    var sX = -2 + Math.ceil(Math.random() * 8);
    var sY = -2 + Math.ceil(Math.random() * 8);

    var obj = {
        cX: cX,
        cY: cY,
        r: r,
        sX: sX,
        sY: sY,
        bgColor: bgColor
    };

    /*避免出現圓形出如今原地 沒有動畫效果*/
    if (sX != 0 || sY != 0) {
        setArr.push(obj);
    }

}, 1000/20);

/*控制隨機圓的動效 一秒鐘執行60次*/
setInterval(function() {

    /*每次繪製一個圓都要清空畫布，不然每一個圓都會鏈接在一塊兒造成直線*/
    context.clearRect(0, 0, canvas.width, canvas.height);

    for (var i = 0; i < setArr.length; i++) {

        if(setArr[i].cY + setArr[i].r >= canvas.height || setArr[i].cY - setArr[i].r <= 0){
            // 觸碰上下邊界
            setArr[i].sY *= -1;
        }
        if(setArr[i].cX + setArr[i].r >= canvas.width || setArr[i].cX - setArr[i].r <= 0){
            // 觸碰左右邊界
            setArr[i].sX *= -1;
        }

        /*繪製一個圓形*/
        setArr[i].cX += setArr[i].sX;
        setArr[i].cY += setArr[i].sY;
        context.beginPath();
        context.arc(setArr[i].cX, setArr[i].cY, setArr[i].r, 0, 2 * Math.PI);
        context.fillStyle = setArr[i].bgColor;
        context.fill();
    }

}, 1000/60);
複製代碼

在開發過程當中遇到的問題：

一、生成的多個粒子部分在原位不動，沒有任何變化

二、粒子如何反彈？

第一個解決辦法，則是當速度都不爲0的時候才把粒子添加到setArr數組中

/*避免出現圓形出如今原地 沒有動畫效果*/
if (sX != 0 || sY != 0) {
    setArr.push(obj);
}
複製代碼

第二個問題分析，以下圖所示，當具備如下狀況的時候進行反彈：

for (var i = 0; i < setArr.length; i++) {

    if(setArr[i].cY + setArr[i].r >= canvas.height || setArr[i].cY - setArr[i].r <= 0){
        // 觸碰上下邊界
        setArr[i].sY *= -1;
    }
    if(setArr[i].cX + setArr[i].r >= canvas.width || setArr[i].cX - setArr[i].r <= 0){
        // 觸碰左右邊界
        setArr[i].sX *= -1;
    }
}
複製代碼