<table width="250" height="420" border="1" align="center" class="colorborder"> <tr> <td width="250" height="420" style="cursor:pointer; background-image:url(https://sklees.narod.ru/Scr/desine/GMfonopacity.png)"><canvas id="c" width="250" height="420"></canvas></td> </tr> </table> <script> window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame; var canvas = document.getElementById("c"), ctx = canvas.getContext("2d"), w = canvas.width, h = canvas.height, logoParticles = [], particleIndex = 0, logo = new Image(); function Particle(x, y){ this.origX = this.x = x; this.origY = this.y = y; this.color = "#ffffff00"; this.maxLife = this.random(1); this.life = 0; this.vx = this.random(-1, 1); this.vy = this.random(-1, 1); this.grav = 1; this.index = particleIndex; logoParticles[particleIndex] = this; particleIndex++; } Particle.prototype = { constructor: Particle, draw: function(){ ctx.fillStyle = this.color; ctx.fillRect(this.x, this.y, 2, 2); ctx.fillRect(this.x, this.y, 2, 2); ctx.fillRect(this.x, this.y, 2, 2); ctx.fillRect(this.x, this.y, 2, 2); ctx.fillRect(this.x, this.y, 2, 2); this.update(); }, update: function(){ if(this.life >= this.maxLife){ logoParticles[this.index].reset(); } this.x += this.vx; this.y += this.vy; this.vy += this.grav; this.life++; }, reset: function(){ this.x = this.origX; this.y = this.origY; this.life = 0; this.color = "#0000FF" this.vx = this.random(-1, 1); this.vy = this.random(-1, 1); }, random: function(){ var min = arguments.length == 1 ? 0 : arguments[0], max = arguments.length == 1 ? arguments[0] : arguments[1]; return Math.random() * (max - min) + min; } }; logo.src = "data:image/png;base64,iVBORw0KGgoAAA... png file ... AABJRU5ErkJggg=="; logo.onload = function(){ var posX = (w - this.width)/2, posY = (h - this.height)/2; ctx.drawImage(this, posX, posY); var imgData = ctx.getImageData(0, 0, w, h), pixels = imgData.data; for(var y = 0; y < imgData.height; y+=3) { for(var x = 0; x < imgData.width; x+=3) { var alpha = pixels[((imgData.width * y) + x) * 4 + 3]; if(alpha > 0){ logoParticles.push(new Particle(x, y)); } } } setTimeout(function(){ animate(); }, 80); }; function animate(){ ctx.clearRect(0, 0, w, h); ctx.fillStyle = "rgba(255,255,255,.7)"; // ctx.fillRect(0,0,w,h); for(var i in logoParticles){ logoParticles[i].draw(); } window.requestAnimationFrame(animate); } </script>