Разноцветные частицы, летящие слева на 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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<script> window.onload = function() { // Creating the Canvas var canvas = document.createElement("canvas"), c = canvas.getContext("2d"), particles = {}, particleIndex = 0, particleNum = 0.1; canvas.width = window.innerWidth; canvas.height = window.innerHeight; canvas.id = "motion"; document.body.appendChild(canvas); // Finished Creating Canvas // Setting color which is just one big square c.fillStyle = "black"; c.fillRect(0, 0, canvas.width, canvas.height); // Finished Color var y_fourth = Math.floor(canvas.height / 4); var y_second_fourth = Math.floor(y_fourth * 2); function Particle() { var random_x = Math.floor(Math.random() * (0)) + 1; var random_y = Math.floor(Math.random() * y_second_fourth + y_fourth) + 1; this.x = random_x; this.y = random_y; this.vx = Math.random() * 5 - 2; this.vy = Math.random() * 2 - 1; this.gravity = 0; particleIndex++; particles[particleIndex] = this; this.id = particleIndex; this.size = Math.random() * 6 - 2; this.color = "hsla(0,0%," + parseInt(Math.random() * 100, 0) + "%,1)"; this.color2 = "hsla(360,100%," + parseInt(Math.random() * 100, 0) + "%,1)"; this.color3 = "hsla(210,100%," + parseInt(Math.random() * 100, 0) + "%,1)"; this.color_selector = Math.random() * 150 - 1; } Particle.prototype.draw = function() { this.x += this.vx; this.y += this.vy; this.vy += this.gravity; if (this.x > canvas.width || this.y > canvas.height) { delete particles[this.id]; } if (this.color_selector < 30 && this.color_selector > 10) { c.fillStyle = this.color2; } else if (this.color_selector < 10) { c.fillStyle = this.color3; } else { c.fillStyle = this.color; } c.fillRect(this.x, this.y, this.size, this.size); }; setInterval(function() { c.fillStyle = "black"; c.fillRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < particleNum; i++) { new Particle(); } for (var i in particles) { particles[i].draw(); } }, 30); }; </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
Супер эффект! Обязательно буду использовать его в своих проектах!