逼真的HTML5火焰燃烧特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是逼真的HTML5火焰燃烧特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>逼真的HTML5火焰燃烧特效</title>
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>

<body>
    <div class="wrapper">
        <canvas id="surface"></canvas>
    </div>
    <script src='js/jquery.js'></script>
    <script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

$( 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)/100var 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 particlesif(p.death < 0 || p.radius < 0){
	//a brand new particle replacing the dead oneparticles[i] = new particle();
}
}
requestAnimFrame(ParticleAnimation);
}
ParticleAnimation();
}
);

CSS代码(style.css):

body{background:#000;}
.wrapper{margin:20px auto;text-align:center;}
canvas{width:100%;height:100%;}

附件:下载该文件资源,减少时间成本(增值服务)

.rar

33.92 KB

立即下载(CNY 2.9￥)

打赏收藏

分享到QQ

分享到微博

微信扫一扫

留言

该资源可下载

.rar

33.92 KB

立即下载

石静

了解

打赏作者鼓励作者

Html 动画效果3