使用HTML5 Canvas实现火焰风暴动画

HTML5 herman 1088浏览 0评论

继续我们的 HTML5 动画学习系列。本文将为大家分享一款基于 HMTL5 Canvas 实现的火焰风暴动画,通过本文的学习,你将进一步加深对 HTML5 动画的理解。

火焰风暴动画是利用HTML5技术实现的。前面我们已经实现过不少动画特效的HTML5应用,尤其是和Canvas搭配。这次给大家带来的是一款基于HTML5 Canvas的火焰风暴动画特效,改动画效果就像从天上掉落火焰一样,火焰风暴逐渐蔓延到整一个画布。

火焰风暴动画

HTML5 Canvas 火焰风暴动画

相关实现的html5代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML5 Canvas炫酷的火焰风暴动画|业余草|www.xttblog.com</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
  <script src="js/index.js"></script>
</body>
</html>

相关 JavaScript 代码如下:

var c = document.createElement( 'canvas' ),
    ctx = c.getContext( '2d' ),
    w = c.width = 600,
    h = c.height = 400,
    particles = [],
    particleCount = 1000,
    particlePath = 4,
    pillars = [],
    pillarCount = 110,
    hue = 0,
    hueRange = 60,
    hueChange = 1,
    gravity = 0.1,
    lineWidth = 1,
    lineCap = 'round',
    PI = Math.PI,
    TWO_PI = PI * 2;
function rand( min, max ) {
	return Math.random() * ( max - min ) + min;
}
function distance( a, b ) {
  var dx = a.x - b.x,
      dy = a.y - b.y;
  return Math.sqrt( dx * dx + dy * dy );
}
function Particle( opt ) {
  this.path = [];
  this.reset();
}
Particle.prototype.reset = function() {
  this.radius = 1;
  this.x = rand( 0, w );
  this.y = 0;
  this.vx = 0;
  this.vy = 0;
  this.hit = 0;
  this.path.length = 0;
};
Particle.prototype.step = function() {
  this.hit = 0;
  this.path.unshift( [ this.x, this.y ] );
  if( this.path.length > particlePath ) {
    this.path.pop();
  }
  this.vy += gravity;
  this.x += this.vx;
  this.y += this.vy;
  if( this.y > h + 10 ) {
    this.reset();
  }
  var i = pillarCount;
  while( i-- ) {
    var pillar = pillars[ i ];
    if( distance( this, pillar ) < this.radius + pillar.renderRadius ) {
      this.vx = 0;
      this.vy = 0;
      this.vx += -( pillar.x - this.x ) * rand( 0.01, 0.03 );
      this.vy += -( pillar.y - this.y ) * rand( 0.01, 0.03 );
      pillar.radius -= 0.1;
      this.hit = 1;
    }
  }
};
Particle.prototype.draw = function() {
  ctx.beginPath();
  ctx.moveTo( this.x, ~~this.y );
  for( var i = 0, length = this.path.length; i < length; i++ ) {
    var point = this.path[ i ];
    ctx.lineTo( point[ 0 ], ~~point[ 1 ] );
  }
  ctx.strokeStyle = 'hsla(' + rand( hue + ( this.x / 3 ), hue + ( this.x / 3 ) + hueRange ) + ', 50%, 30%, 0.3)';
  ctx.stroke();
  if( this.hit ) {
    ctx.beginPath();
    ctx.arc( this.x, this.y , rand( 1, 25 ), 0, TWO_PI );
    ctx.fillStyle = 'hsla(' + rand( hue + ( this.x / 3 ), hue + ( this.x / 3 ) + hueRange ) + ', 80%, 15%, 0.1)'
    ctx.fill();
  }
};
function Pillar() {
  this.reset();
}
Pillar.prototype.reset = function(){
  this.radius = rand( 50, 100 );
  this.renderRadius = 0;
  this.x = rand( 0, w );
  this.y = rand( h / 2 - h / 4, h );
  this.active = 0;
};
Pillar.prototype.step = function() {
  if( this.active ) {
    if( this.radius <= 1 ) {
      this.reset();
    } else {
      this.renderRadius = this.radius;
    }
  } else {
    if( this.renderRadius < this.radius ) {
      this.renderRadius += 0.5;
    } else {
      this.active = 1;
    }
  }
};
Pillar.prototype.draw = function() {
  ctx.beginPath();
  ctx.arc( this.x, this.y, this.renderRadius, 0, TWO_PI, false );
  ctx.fill();
};
function init() {
  ctx.lineWidth = lineWidth;
  ctx.lineCap = lineCap;
  var i = pillarCount;
  while( i-- ){
    pillars.push( new Pillar() );
  }
  document.body.appendChild( c );
  loop();
}
function step() {
  hue += hueChange;
  if( particles.length < particleCount ) {
    particles.push( new Particle() );
  }
  var i = particles.length;
  while( i-- ) {
    particles[ i ].step();
  }
  i = pillarCount;
  while( i-- ) {
    pillars[ i ].step();
  }
}
function draw() {
  ctx.fillStyle = 'hsla(0, 0%, 0%, 0.1)';
  ctx.fillRect( 0, 0, w, h );
  ctx.globalCompositeOperation = 'lighter';
  var i = particles.length;
  while( i-- ) {
    particles[ i ].draw();
  }
  ctx.globalCompositeOperation = 'source-over';
  i = pillarCount;
  ctx.fillStyle = 'rgba(20, 20, 20, 0.3)';
  while( i-- ) {
    pillars[ i ].draw();
  }
}
function loop() {
  requestAnimationFrame( loop );
  step();
  draw();
}
init();

 相关 css 代码如下:

html,
body {
  height: 100%;
}

body {
  background: #111;
  background: radial-gradient(#222, #000);
  overflow: hidden;
}
canvas {
  background: #000;
  bottom: 0;
  box-shadow:
    0 0 0 10px #222,
    0 30px 30px -20px #000
  ;
  left: 0;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  right: 0;
  top: 0;
}

reset.css 是重置浏览器样式的代码。大家可以使用网上免费的cdn代码。

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763,QQ2群:454796847,QQ3群:187424846。QQ群进群密码:xttblog,想加微信群的朋友,可以微信搜索:xmtxtt,备注:“xttblog”,添加助理微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » 使用HTML5 Canvas实现火焰风暴动画