Реалистичный метеорит на HTML5 Canvas
Неплохо анимированный метеорит на HTML5 Canvas
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:
|
1 2 3 4 5 6 |
canvas { background: #000; display: block; margin: 0 auto; height: 400px; } |
2#: После открывающего тега <body> вставьте:
|
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='canvas'></canvas> <script type="text/javascript"> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var particles = []; var particle_count = 200; for(var i=0; i<particle_count; i++){ particles.push(new particle()); } function loop() { requestAnimationFrame(loop); draw(); } function particle() { this.loc = {x:canvas.width/2,y:canvas.height/2 + 50}; this.speed = {x: Math.random()*5,y:-15+Math.random()*10}; this.radius = 10+Math.random()*12; this.life = 15+Math.random()*8; this.remaining_life = this.life; this.color = {}; this.color.r=Math.floor(Math.random()*255); this.color.g=Math.floor(Math.random()*25); this.color.b=Math.floor(Math.random()*25); } function draw() { ctx.globalCompositeOperation = 'source-over'; ctx.fillStyle = '#000'; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.globalCompositeOperation = 'lighter'; for(var i=0; i<particles.length; i++){ var p = particles[i]; ctx.beginPath(); p.opacity = Math.round(p.remaining_life/ p.life*100)/100; var gradient = ctx.createRadialGradient(p.loc.x, p.loc.y, 0, p.loc.x, p.loc.y, p.radius); gradient.addColorStop(0, "rgba(" + p.color.r + "," + p.color.g + "," + p.color.b + "," + p.opacity + ")" ); gradient.addColorStop(0.5, "rgba(" + p.color.r + "," + p.color.g + "," + p.color.b + "," + p.opacity + ")" ); gradient.addColorStop(1, "rgba(" + p.color.r + "," + p.color.g + "," + p.color.b + ", 0)" ); ctx.fillStyle = gradient; ctx.arc(p.loc.x, p.loc.y, p.radius, 0, Math.PI*2, false); ctx.fill(); p.remaining_life--; p.radius--; p.loc.x += p.speed.x; p.loc.y += p.speed.y; if(p.remaining_life<0 || p.radius <0){ particles[i] = new particle(); } } } loop(); </script> |
background: #000; не действивелен ( фон всегда черный а хотелось бы прозрачный если можно :"D
Там еще в js указан фон #000. Можно указать rgba по идеи