Радужный дождь на HTML5 Canvas
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<canvas id="c"></canvas> <script> //initial var w = c.width = window.innerWidth, h = c.height = window.innerHeight, ctx = c.getContext('2d'), //parameters total = (w / 8) | 0, accelleration = .05, lineAlpha = .02, range = 25, //afterinitial calculations size = w / total, occupation = w / total, repaintColor = 'rgba(0, 0, 0, .04)' colors = [], dots = [], dotsVel = []; //setting the colors' hue //and y level for all dots var portion = 360 / total; for (var i = 0; i < total; ++i) { colors[i] = portion * i; dots[i] = h; dotsVel[i] = 10; } function anim() { window.requestAnimationFrame(anim); ctx.fillStyle = repaintColor; ctx.fillRect(0, 0, w, h); for (var i = 0; i < total; ++i) { var currentY = dots[i] - 1; dots[i] += dotsVel[i] += accelleration; for (var j = i + 1; j < i + range && j < total; ++j) { if (Math.abs(dots[i] - dots[j]) <= range * size) { ctx.strokeStyle = 'hsla(hue, 80%, 50%, alp)'.replace('hue', (colors[i] + colors[j] + 360) / 2 - 180).replace('alp', lineAlpha); ctx.beginPath(); ctx.moveTo(i * occupation, dots[i]); ctx.lineTo(j * occupation, dots[j]); ctx.stroke(); } } if (dots[i] > h && Math.random() < .01) { dots[i] = dotsVel[i] = 0; } } } anim(); </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
