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('mouSEMove', 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>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

使用canvas画“哆啦A梦”时钟的代码

关于html5.2 diaLOG的介绍

以上就是html5使用canvas实现跟随光标跳动的火焰效果的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！