HTML5 Canvas粒子火焰动画特效源码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

14 55 19



特效描述:粒子火焰动画。HTML5 Canvas粒子火焰动画特效是一款跟随鼠标燃烧的粒子火焰动画特效下载。

代码结构

1. HTML代码

<h1>Move around</h1>
<canvas id="canvas"></canvas>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <filter id="goo">
    <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
    <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 60 -9">
  </filter>
</svg>
<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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源:<a href="http://sc.51qianduan.com/" target="_blank">站长素材</a></p>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到