本效果的完整代码如下,把代码保存到HTML文件中打开也能查看效果,火焰会跟随光标: 复制代码代码如下: HTML5 Canvas火焰效果 <br />body{margin: 0; padding: 0;}<br />#canvas-keleyi-com {display: block;}<br /> <br />window.onload = function(){<br />var keleyi_canvas = document.getElementById("canvas-kel"+"eyi-com");<br />var ctx = keleyi_canvas.getContext("2d");<br />var W = window.innerWidth, H = window.innerHeight;<br />keleyi_canvas.width = W;<br />keleyi_canvas.height = H; <p>var particles = [];<br />var mouse = {}; <p>//Lets create some particles now<br />var particle_count = 100;<br />for(var i = 0; i < particle_count; i++)<br />{<br />particles.push(new particle());<br />}<br />keleyi_canvas.addEventListener('mousemove', track_mouse, false); <p>function track_mouse(e)<br />{<br />mouse.x = e.pageX;<br />mouse.y = e.pageY;<br />} <p>function particle()<br />{<br />this.speed = {x: -2.5+Math.random()*5, y: -15+Math.random()*10};<br />//location = mouse coordinates<br />//Now the flame follows the mouse coordinates<br />if(mouse.x && mouse.y)<br />{<br />this.location = {x: mouse.x, y: mouse.y};<br />}<br />else<br />{<br />this.location = {x: W/2, y: H/2};<br />}<br />//radius range = 10-30<br />this.radius = 10+Math.random()*20;<br />//life range = 20-30<br />this.life = 20+Math.random()*10;<br />this.remaining_life = this.life;<br />//colors<br />this.r = Math.round(Math.random()*255);<br />this.g = Math.round(Math.random()*255);<br />this.b = Math.round(Math.random()*255);<br />} <p>function draw()<br />{<br />ctx.globalCompositeOperation = "source-over";<br />ctx.fillStyle = "black";<br />ctx.fillRect(0, 0, W, H);<br />ctx.globalCompositeOperation = "lighter"; <p>for(var i = 0; i < particles.length; i++)<br />{<br />var p = particles[i];<br />ctx.beginPath();<br />p.opacity = Math.round(p.remaining_life/p.life*100)/100<br />var gradient = ctx.createRadialGradient(p.location.x, p.location.y, 0, p.location.x, p.location.y, p.radius);<br />gradient.addColorStop(0, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")");<br />gradient.addColorStop(0.5, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")");<br />gradient.addColorStop(1, "rgba("+p.r+", "+p.g+", "+p.b+", 0)");<br />ctx.fillStyle = gradient;<br />ctx.arc(p.location.x, p.location.y, p.radius, Math.PI*2, false);<br />ctx.fill(); <p><br />p.remaining_life--;<br />p.radius--;<br />p.location.x += p.speed.x;<br />p.location.y += p.speed.y; <p>if(p.remaining_life < 0 || p.radius < 0)<br />{<br />particles[i] = new particle();<br />}<br />}<br />} <p>setInterval(draw, 86);<br />}<br />
