canvas 火焰

最新推荐文章于 2023-11-02 15:34:48 发布

elegancy_

最新推荐文章于 2023-11-02 15:34:48 发布

阅读量767

点赞数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<script src="jquery/jquery-1.8.2.min.js"></script>
<style>
.wrapper {
  margin: 20px auto;
  text-align: center;
}
canvas {
  width: 100%;
  height: 100%;
}
</style>
<script>
$( document ).ready(function() {

  // Set canvas drawing surface
  var space = document.getElementById("surface");
  var surface = space.getContext("2d");
  surface.scale(1,1);

  // Set Particles
  var particles = [];
  var particle_count = 150;
  for(var i = 0; i < particle_count; i++) {
		particles.push(new particle());
	}
  var time = 0;
  // Set wrapper and canvas items size
  var canvasWidth=320;
  var canvasHeight=480;
  $(".wrapper").css({width:canvasWidth,height:canvasHeight});
  $("#surface").css({width:canvasWidth,height:canvasHeight});

  // shim layer with setTimeout fallback from Paul Irish
  window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            function( callback ){
              window.setTimeout(callback, 6000 / 60);
            };
  })(); 

  function particle() {

		this.speed = {x: -1+Math.random()*2, y: -5+Math.random()*5};
     canvasWidth = (document.getElementById("surface").width);
     canvasHeight= (document.getElementById("surface").height);
     this.location = {x: canvasWidth/2, y: (canvasHeight/2)+35};

		this.radius = .5+Math.random()*1;

		this.life = 10+Math.random()*10;
		this.death = this.life;

		this.r = 255;
		this.g = Math.round(Math.random()*155);
		this.b = 0;
	}

  function ParticleAnimation(){
		surface.globalCompositeOperation = "source-over";
		surface.fillStyle = "black";
		surface.fillRect(0, 0, canvasWidth, canvasHeight);
		surface.globalCompositeOperation = "lighter";

		for(var i = 0; i < particles.length; i++)
		{
			var p = particles[i];

			surface.beginPath();

			p.opacity = Math.round(p.death/p.life*100)/100
			var gradient = surface.createRadialGradient(p.location.x, p.location.y, 0, p.location.x, p.location.y, p.radius);
			gradient.addColorStop(0, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")");
			gradient.addColorStop(0.5, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")");
			gradient.addColorStop(1, "rgba("+p.r+", "+p.g+", "+p.b+", 0)");
			surface.fillStyle = gradient;
			surface.arc(p.location.x, p.location.y, p.radius, Math.PI*2, false);
			surface.fill();
			p.death--;
			p.radius++;
			p.location.x += (p.speed.x);
			p.location.y += (p.speed.y);

			//regenerate particles
			if(p.death < 0 || p.radius < 0){
				//a brand new particle replacing the dead one
				particles[i] = new particle();
			}
		}

  requestAnimFrame(ParticleAnimation);

}

ParticleAnimation();

});
</script>
</head>

<body>
<div>
<canvas id="surface"></canvas>
</div>
</body>
</html>

elegancy_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 火焰

无标题文档.wrapper { margin: 20px auto; text-align: center;}canvas { width: 100%; height: 100%;}$( document ).ready(function() { // Set canvas drawing surface var space = document.get
复制链接

扫一扫