Мыльные пузыри, следующие за курсором на 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 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
<canvas id="myv"></canvas> <script> var canvas = document.getElementById('myv'); var c = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var mouse = { x: canvas.width / 2, y: canvas.height / 2 } window.addEventListener("resize", function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); window.addEventListener("mousemove", function(e) { mouse.x = e.clientX; mouse.y = e.clientY; }); var colors = [{ r: 255, g: 71, b: 71 }, { r: 0, g: 206, b: 237 }, { r: 255, g: 255, b: 255 }]; function Particle(x, y, dx, dy, r, ttl) { this.x = x; this.y = y; this.dx = dx; this.dy = dy; this.r = r; this.opacity = 1; this.shouldRemove = false; this.timeToLive = ttl; this.randomColor = Math.floor(Math.random() * colors.length); console.log(this.randomColor); this.update = function() { this.x += this.dx; this.y += this.dy; if (this.x + this.r >= canvas.width || this.x - this.r < = 0) { this.dx = -this.dx; }; if (this.y + this.r >= canvas.height || this.y - this.r < = 0) { this.dy = -this.dy; }; // Ensure that particles cannot be spawned past canvas boundaries this.x = Math.min(Math.max(this.x, 0 + this.r), canvas.width - this.r); this.y = Math.min(Math.max(this.y, 0 + this.r), canvas.height - this.r); c.beginPath(); c.arc(this.x, this.y, this.r, 0, Math.PI * 2, false); // c.strokeStyle = 'rgba(0, 0, 0,' + this.opacity + ')'; c.strokeStyle = 'rgba(' + colors[this.randomColor].r + ',' + colors[this.randomColor].g + ',' + colors[this.randomColor] .b + ',' + this.opacity + ')'; c.fillStyle = 'rgba(' + colors[this.randomColor].r + ',' + colors[this.randomColor].g + ',' + colors[this.randomColor] .b + ',' + this.opacity + ')'; // c.fill(); c.stroke(); c.closePath(); this.opacity -= 1 / (ttl / 0.1); this.r -= r / (ttl / 0.1); this.timeToLive -= 0.1; } this.remove = function() { // If timeToLive expires, return a true value. // This signifies that the particle should be removed from the scene. return this.timeToLive <= 0; } } function Explosion(x, y) { this.particles = []; this.init = function() { for (var i = 1; i <= 1; i++) { var randomVelocity = { x: (Math.random() - 0.5) * 3.5, y: (Math.random() - 0.5) * 3.5, } this.particles.push(new Particle(x, y, randomVelocity.x, randomVelocity.y, 30, 8)); } } this.init(); this.draw = function() { for (var i = 0; i < this.particles.length; i++) { this.particles[i].update(); if (this.particles[i].remove() == true) { this.particles.splice(i, 1); }; } } } var explosions = []; function animate() { clearTimeout(animate); setTimeout(animate, 10); c.fillStyle = "#1e1e1e"; c.fillRect(0, 0, canvas.width, canvas.height); explosions.push(new Explosion(mouse.x, mouse.y)); for (var i = 0; i < explosions.length; i++) { explosions[i].draw(); } } animate(); </script></script> |
