烟花倒影粒子喷射效果-html代码-BFW代码库

烟花倒影粒子喷射效果

代码语言：html

所属分类：粒子

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<style>
canvas { position: absolute; top: 0; left: 0; }
</style>
</head>
<body>
<canvas id=c></canvas>
<script>	
	var w = c.width = window.innerWidth
	,h = c.height = window.innerHeight
	,ctx = c.getContext( '2d' )
	,opts = {
		baseBaseSize: 15,
		addedBaseSize: 5,
		baseVel: 2,
		addedVel: 1,
		baseTime: 60,
		addedTime: 20,
		overTime: 5,
		sliding: .99,
		particleChance: .9,
		particles: 100,
		templateParticleColor: 'hsla(hue,80%,40%,alp)',
		repaintAlpha: 'rgba(0,0,0,.1)',
		startColor: .2,
		fullColor: .5,
		stopColor: .6,
		timeToColorChange: 3
	}
	,	particles = []
	,	tick = 0;

function Particle(){
	this.reset();
}
Particle.prototype.reset = function(){
	this.x = Math.pow( Math.random(), 1/4 );
	this.y = h / 2;	
	var color = opts.templateParticleColor.replace( 'hue', this.x * 360 * 2 + tick * opts.timeToColorChange );
	this.baseSize = ( Math.random() + this.x ) / 2 * ( opts.baseBaseSize + opts.addedBaseSize * Math.random() );
	this.gradient = ctx.createRadialGradient( 0, 0, 0, 0, 0, this.baseSize / 2 );
	this.gradient.addColorStop( opts.startColor, color.replace( 'alp', 0 ) );
	this.gradient.addColorStop( opts.fullColor, color.replace( 'alp', 1 ) );
	this.gradient.addColorStop( opts.stopColor, color.replace( 'alp', 1 ) );
	this.gradient.addColorStop( 1, color.replace( 'alp', 0 ) );
	
	this.vx = -( 1 + Math.random() / 10 - this.x) * ( opts.baseVel + Math.random() * opts.addedVel );
	this.vy = Math.pow( this.x, .........完整代码请登录后点击上方下载按钮下载查看