StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You need to make an array of circles, each circle needs its own X/Y/Color and potentially speed, so they move at different rates.</p> <p>So each circle will be a javascript object with </p> <pre><code>{ posX: someValue, posY: someValue, color: someValue, speed: someValue }; </code></pre> <p>Then we will add many of those to an array. Here's an example using your code:</p> <pre><code>var canvas = $("#myCanvas").get(0); var context = canvas.getContext("2d"); var circleColors = new Array(); circleColors[0] = "#f0f"; circleColors[1] = "#0f0"; circleColors[2] = "#00f"; circleColors[3] = "#f00"; var circles = []; function makeCircles() { for (var i = 0; i < 20; i++) { var circle = { posX: Math.floor(Math.random() * 500), posY: 500, color: circleColors[Math.floor(Math.random() * circleColors.length)], speed: Math.floor(Math.random()*5) }; circles.push(circle); } function renderContent() { for (var i = 0; i < circles.length; i++) { var c = circles[i]; context.fillStyle = c.color; context.beginPath(); context.arc(c.posX, c.posY, 40, 0, 2 * Math.PI); context.fill(); } } //end function renderContent function animationLoop() { canvas.width = canvas.width; renderContent(); for (var i = 0; i < circles.length; i++) { var c = circles[i]; c.posY -= c.speed; if (c.posY < -40) c.posY = 500; } setTimeout(animationLoop, 33); } //end function animationLoop animationLoop(); } //end function makeCircles makeCircles(); </code></pre> <p>And here it is live:</p> <p><a href="http://jsfiddle.net/vTaLF/" rel="nofollow">http://jsfiddle.net/vTaLF/</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload