ウォーターフォールを描画する1つの方法は、パーティクルを使うことです。このサイトhttp://spinorlab.matrix.jp/mytest4.htmlを訪問すれば、デモを見ることができます。
約6,800個のパーティクルが、600 x 400画素のイメージのために使われています。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> <script> window.addEventListener("load", init); function init() { var stage = new createjs.Stage("myCanvas"); var particles = []; createjs.Ticker.setFPS(30); createjs.Ticker.addEventListener("tick", handleTick); function handleTick(event) { emitParticles(); updateParticles(); stage.update(); } function emitParticles() { for (var i = 0; i < 100; i++) { var particle = new createjs.Shape(); particle.graphics .beginFill(createjs.Graphics.getHSL((i*3.6+20*Math.random())%360, 100, 50)) .drawCircle(0, 0, 2); stage.addChild(particle); particle.compositeOperation = "darker"; particle.x = i * 6 + 3; particle.y = 0; particle.vy = 6; particle.life = 400/6 - 1; particles.push(particle); } } function updateParticles() { for (var i = 0; i < particles.length; i++) { var particle = particles[i]; particle.y += particle.vy; if (particle.life-- <= 0) { stage.removeChild(particle); particles.splice(i, 1); } } } } </script> </head> <body> <canvas id="myCanvas" width="600" height="400" style="background:black;"> </canvas> </body> </html>