用畫布卡住/ JS動畫

我正在做一個遊戲在畫布上玩，並且想要使用javascript爲背景圖層添加一些氣氛。首先，這裏是代碼...用畫布卡住/ JS動畫

var canvas = document.getElementById('myCanvas'); 
    var ctx = canvas.getContext("2d"); 
    var x = canvas.width/2; 
    var y = canvas.height-150; 
    var dx = Math.random() * (-5 * 5) + 15; 
    var dy = -15; 

    function drawDot() { 
     ctx.beginPath(); 
     ctx.arc(x, y, 10, 0, Math.PI*2); 
     ctx.fillStyle = "black"; 
     ctx.fill(); 
     ctx.closePath(); 
    }; 

    function move() { 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     drawDot(); 
     x += dx; 
     y += dy; 
    }; 
setInterval(move, 50);

如果您運行的是，你可以看到，我有什麼是向上移動和關閉頁的隨機conal空間內一個黑球。我需要幫助的是找出以下最佳方法：
A.用更多的球（可能像2-3）按其自己的隨機軌跡填充它，並且
B.使它成爲那樣的2-3個球在同一起始區域的頁面內隨機錐形區域內持續動畫（類似於不斷的噴泉效果）。

我已經可以看到的一個問題是，通過使用控制檯日誌，我現在擁有的1個工作球只是在畫布外面進入無限遠，所以當我嘗試添加新工作球時，它將不會運行功能。我對JavaScript非常陌生，尤其是畫布，所以如果這是顯而易見的道歉！謝謝你的幫助！

來源

2016-02-19 Eclissi

有一個很好的教程由勒布李迪萊爾在這裏這個確切的問題：

https://vimeo.com/36278748

基本上你不得不封裝每個Dot所以它知道自己的位置和加速度。

編輯1

下面是使用你自己的代碼示例：

document.body.innerHTML = '<canvas height="600" width="600" id="myCanvas"></canvas>'; 
clearInterval(interval); 
var canvas = document.getElementById('myCanvas'); 
var ctx = canvas.getContext('2d'); 
var dotArray = []; 

function Dot() { 
    var dot = { 
     y : canvas.height/2, 
     x : canvas.width/2, 
     speedX : Math.random() * (- 5 * 5) + 15, 
     speedY : Math.random() * (- 5 * 5) + 15, 
     age : 0, 
     draw : function() { 

      this.x += this.speedX; 
      this.y += this.speedY; 

      ctx.beginPath(); 
      ctx.arc(this.x, this.y, 10, 0, Math.PI * 2); 
      ctx.fillStyle = 'black'; 
      ctx.fill(); 
      ctx.closePath(); 
     } 
    }; 
    return dot; 
} 

function draw() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    for (var i = 0; i < dotArray.length; i++) { 
     dotArray[i].draw(); 
     dotArray[i].age++; 
     if (dotArray[i].age > 20) { 
      dotArray.splice(i, 1); 
     } 
    } 
    dotArray.push(new Dot()); 
} 

draw(); 
var interval = setInterval(draw, 1000/60);

來源

2016-02-19 09:45:55

用畫布卡住/ JS動畫

回答

相關問題