HTML5 Canvas粒子火焰动画特效 - 阿强爱分享

HTML5 Canvas粒子火焰动画特效

作者: Aqiang

全网最全的网络资源分享网站

手机扫码查看

标签:

CSS代码

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!邮箱:2377724272@qq.com

HTML5 Canvas粒子火焰动画特效,动画优美,喜欢的朋友可以自己修改下。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Canvas粒子火焰动画特效 -</title>

<style>
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700);
body {
  overflow: hidden;
  background: #191747;
}

svg {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
}

#canvas {
  -webkit-filter: url("#goo");
  filter: url("#goo");
}

h1 {
  color: #fff;
  text-align: center;
  font-family: Quicksand;
  letter-spacing: 10px;
  font-size: 20px;
  text-transform: uppercase;
  position: fixed;
  top: 100px;
  right: 0;
  left: 0;
}
</style>
</head>
<body>

<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="https://iooqp.cn/" target="_blank"></a></p>
</div>
</body>
</html>
分享到:
打赏

公告提示:本站已开放注册,欢迎投稿。
头像
站长签名: 专注分享各类源码-全网资源免费分享平台好货不私藏

文章作者信息版权声明

阅读时间:  发布于:2019-10-23

本文标题: HTML5 Canvas粒子火焰动画特效

本文链接: https://iooqp.cn/?post=530

版权声明:文章为《 Aqiang》原创,转载请保留出处! 本文共有 2589 个字!

分享到:

评论

未显示?请点击刷新
切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

© 2019 阿强爱分享   京ICP备19031919号-2

粤公网安备 44200002443934号

免责声明:本站所发布的资源信息及软件文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,本站信息来自网络,版权争议与本站无关。

HTML5 Canvas粒子火焰动画特效

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏