html5使用canvas实现跟随光标跳动的火焰效果

百变鹏仔 3个月前 (10-18) #H5教程

文章标签光标

本示例通过javascript使用html5的canvas元素在屏幕上显示一个跳动的火焰，火焰会跟随光标跳动

本效果的完整代码如下,把代码保存到HTML文件中打开也能查看效果,火焰会跟随光标:

<!DOCTYPE HTML><head><meta charset=utf-8" /><title>HTML5 Canvas火焰效果</title><style type="text/css">body{margin: 0; padding: 0;}#canvas-keleyi-com {display: block;}</style></head><body><canvas id="canvas-keleyi-com"></canvas><script type="text/javascript">window.onload = function(){var keleyi_canvas = document.getElementById("canvas-kel"+"eyi-com");var ctx = keleyi_canvas.getContext("2d");var W = window.innerWidth, H = window.innerHeight;keleyi_canvas.width = W;keleyi_canvas.height = H;</p><p>var particles = [];var mouse = {};</p><p>//Lets create some particles nowvar particle_count = 100;for(var i = 0; i < particle_count; i++){particles.push(new particle());}keleyi_canvas.addEventListener(&#39;mousemove&#39;, track_mouse, false);</p><p>function track_mouse(e){mouse.x = e.pageX;mouse.y = e.pageY;}</p><p>function particle(){this.speed = {x: -2.5+Math.random()*5, y: -15+Math.random()*10};//location = mouse coordinates//Now the flame follows the mouse coordinatesif(mouse.x && mouse.y){this.location = {x: mouse.x, y: mouse.y};}else{this.location = {x: W/2, y: H/2};}//radius range = 10-30this.radius = 10+Math.random()*20;//life range = 20-30this.life = 20+Math.random()*10;this.remaining_life = this.life;//colorsthis.r = Math.round(Math.random()*255);this.g = Math.round(Math.random()*255);this.b = Math.round(Math.random()*255);}</p><p>function draw(){ctx.globalCompositeOperation = "source-over";ctx.fillStyle = "black";ctx.fillRect(0, 0, W, H);ctx.globalCompositeOperation = "lighter";</p><p>for(var i = 0; i < particles.length; i++){var p = particles[i];ctx.beginPath();p.opacity = Math.round(p.remaining_life/p.life*100)/100var 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();</p><p>p.remaining_life--;p.radius--;p.location.x += p.speed.x;p.location.y += p.speed.y;</p><p>if(p.remaining_life < 0 || p.radius < 0){particles[i] = new particle();}}}</p><p>setInterval(draw, 86);}</script></body></html>

文章推荐

html5使用canvas实现跟随光标跳动的火焰效果

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集