html5 canvas跟随鼠标移动的彩色火焰动画特效免费下载

html5 canvas跟随鼠标移动的彩色火焰动画特效,酷炫的粒子火焰燃烧动画效果。

JS代码

<script> 
window.onload = function(){ 
   
  var canvas = document.getElementById("canvas"), 
      ctx = canvas.getContext("2d"); 
   
  var w = canvas.width = window.innerWidth * 2; 
  var h = canvas.height = window.innerHeight * 2; 
 
  var numParticles = 50, 
      particles = [], 
      radius = 12, 
      speed = 0.1; 
 
  function randomize(min, max) { 
    return Math.round(Math.random() * (max - min) + min); 
  }; 
 
  var pos = { 
    x: w/2, 
    y: h/2 
  }; 
 
  var colors = ["#e67e22", "#e74c3c", "blue"]; 
 
  // clone object pos 
  var accel = JSON.parse(JSON.stringify(pos)); 
 
  document.body.addEventListener("mousemove", function(e){ 
    pos.x = e.clientX; 
    pos.y = e.clientY; 
  }); 
 
  for(var i = 0; i < numParticles; i++){ 
    particles.push(new generate()); 
  }; 
 
  function generate(){ 
    this.x = pos.x; 
    this.y = pos.y; 
    this.radius = randomize(3,6); 
    this.color = colors[Math.floor(Math.random() * colors.length)]; 
    this.vx = randomize(-2, 2); 
    this.vy = randomize(5, 10); 
    this.life = randomize(20, 30); 
  }; 
 
  render(); 
 
  function render(){ 
    ctx.clearRect(0, 0, w, h); 
 
    accel.x += (pos.x - accel.x) * 0.15; 
    accel.y += (pos.y - accel.y) * 0.15; 
 
    ctx.beginPath(); 
    ctx.fillStyle = "#f1c40f"; 
    ctx.arc(accel.x, accel.y, radius, 0, Math.PI * 2, false); 
    ctx.fill(); 
    ctx.globalCompositeOperation = "xor"; 
 
    for(var j = 0; j < particles.length; j++){ 
      var p = particles[j]; 
 
      ctx.beginPath(); 
      ctx.fillStyle = p.color; 
      ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2, false); 
      ctx.fill(); 
 
      p.x += p.vx; 
      p.y -= p.vy; 
 
      p.radius -= 0.075; 
      p.life--; 
 
      if(p.life < 0 || p.radius < 0){ 
        particles[j] = new generate(); 
      } 
 
    } 
 
    requestAnimationFrame(render); 
  } 
 
  // credit 
  balapaCop("Elastic Fire", "rgba(255,255,255,.5)"); 
   
} 
</script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录