HTML5 Canvas粒子火焰动画特效

2024-09-05 12:19:12

字体：大中小

来源：转载

供稿：网友

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>来源：站长素材</p></div></body></html>

上一篇：HTML5 360图片旋转特效

下一篇：H5点击网页彩色粒子爆炸特效