本示例通过javascript使用html5的canvas元素在屏幕上显示一个跳动的火焰，火焰会跟随光标跳动
本效果的完整代码如下,把代码保存到HTML文件中打开也能查看效果,火焰会跟随光标:
nbsp;HTML>HTML5 Canvas火焰效果 body{margin: 0; padding: 0;}#canvas-keleyi-com {display: block;}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;var particles = [];var mouse = {};
//Lets create some particles nowvar particle_count = 100;for(var i = 0; i < particle_count; i++){particles.push(new particle());}keleyi_canvas.addEventListener('mousemove', track_mouse, false);
function track_mouse(e){mouse.x = e.pageX;mouse.y = e.pageY;}
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);}
function draw(){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();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.remaining_life--;p.radius--;p.location.x += p.speed.x;p.location.y += p.speed.y;
if(p.remaining_life < 0 || p.radius < 0){particles[i] = new particle();}}}
setInterval(draw, 86);}
登录后复制
以上就是html5使用canvas实现跟随光标跳动的火焰效果的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3124292.html
