Огонь, который бегает за курсором на HTML5 canvas и jQuery для вашего сайта
|
1 2 3 4 5 6 |
#canvas { position:fixed; top:0px; left:0px; z-index:-1; } |
|
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 |
<canvas id="canvas" width="500" height="500"></canvas> <script> $(document).ready(function(){ window.onload = function(){ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); //Make the canvas occupy the full page var W = window.innerWidth, H = window.innerHeight; canvas.width = W; canvas.height = H; var particles = []; var mouse = {}; //Lets create some particles now var particle_count = 100; for(var i = 0; i < particle_count; i++) { particles.push(new particle()); } //finally some mouse tracking canvas.addEventListener('mousemove', track_mouse, false); function track_mouse(e) { //since the canvas = full page the position of the mouse //relative to the document will suffice mouse.x = e.pageX; mouse.y = e.pageY; } function particle() { //speed, life, location, life, colors //speed.x range = -2.5 to 2.5 //speed.y range = -15 to -5 to make it move upwards //lets change the Y speed to make it look like a flame this.speed = {x: -2.5+Math.random()*5, y: -15+Math.random()*10}; //location = mouse coordinates //Now the flame follows the mouse coordinates if(mouse.x && mouse.y) { this.location = {x: mouse.x, y: mouse.y}; } else { this.location = {x: W/2, y: H/2}; } //radius range = 10-30 this.radius = 10+Math.random()*20; //life range = 20-30 this.life = 20+Math.random()*10; this.remaining_life = this.life; //colors this.r = Math.round(Math.random()*255); this.g = Math.round(Math.random()*255); this.b = Math.round(Math.random()*255); } function draw() { //Painting the canvas black //Time for lighting magic //particles are painted with "lighter" //In the next frame the background is painted normally without blending to the //previous frame ctx.globalCompositeOperation = "source-over"; ctx.fillStyle = "black"; ctx.fillRect(0, 0, W, H); ctx.globalCompositeOperation = "lighter"; for(var i = 0; i < particles.length; i++) { var p = particles[i]; ctx.beginPath(); //changing opacity according to the life. //opacity goes to 0 at the end of life of a particle p.opacity = Math.round(p.remaining_life/p.life*100)/100 //a gradient instead of white fill var gradient = ctx.createRadialGradient(p.location.x, p.location.y, 0, p.location.x, p.location.y, p.radius); gradient.addColorStop(0, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")"); gradient.addColorStop(0.5, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")"); gradient.addColorStop(1, "rgba("+p.r+", "+p.g+", "+p.b+", 0)"); ctx.fillStyle = gradient; ctx.arc(p.location.x, p.location.y, p.radius, Math.PI*2, false); ctx.fill(); //lets move the particles p.remaining_life--; p.radius--; p.location.x += p.speed.x; p.location.y += p.speed.y; //regenerate particles if(p.remaining_life < 0 || p.radius < 0) { //a brand new particle replacing the dead one particles[i] = new particle(); } } } setInterval(draw, 33); } }); </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
