用 HTML 5、CSS 3、JavaScript 实现烟花效果

ITPOW2019/9/18 14:45:26

本文对 https://www.html5tricks.com/demo/html5-canvas-fireworks/ 页面上的烟花代码进行了包装，并增加了一些功能、参数，使用上更便捷。

默认参数使用：

$(window).ready(function (){
	$('#canvas-container').vfireworks();
});

完整引用和参数：

<div id="canvas-container" style="position:fixed; top:0px; left:50%; margin-left:-560px; width:1120px; height:500px;"></div>

<script src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.vfireworks.js"></script>
<script type="text/javascript">
	// launchTime 烟花持续时间，单位：毫秒，默认值：10000
	// clickLaunch 鼠标点击是否触发烟花，默认值：false
	// showRoute 是否显示发射路径，默认值：fasle
	// fworkSpeed 发射速度，值越大越快，默认值：1
	// fworkAccel 发射加速度，默认值：4
	// partCount 炸裂后分散数量，默认值：165
	// partSpeed 炸裂后分散速度，值越大分散越大，默认值：4
	// partSpeedVariance 炸裂分散变化幅度，值越大越接近直线，默认值：1
	// partFriction 炸裂阻力，值越大炸裂分散越小，默认值：3
	// partGravity 引力，负值是反重力，正值越大受重力影响越大，默认值：1
	// hueMin 色调最小值，默认值：0
	// hueMax 色调最大值，默认值：255
	// hueVariance 色调变化幅度，值越大颜色越丰富，默认值：255
	// lineWidth 烟花效果粗细，默认值：1
	// clearAlpha 视觉残留效果，值为 0 是烟花发射和炸裂痕迹不消失，值越大痕迹残留时间越短，默认值：25
	 $('#canvas-container').vfireworks({
		launchTime: 5000,
		clickLaunch: false,
		showRoute: false,
		fworkSpeed: 1,
		fworkAccel: 4,
		partCount: 165,
		partSpeed: 4,
		partSpeedVariance: 1,
		partFriction: 3,
		partGravity: 1,
		hueMin: 0,
		hueMax: 255,
		hueVariance: 255,
		lineWidth: 1,
		clearAlpha: 25
	});
</script>

源码下载：烟花代码下载

这两个有兴趣的话，也可以参考下：https://www.17sucai.com/pins/demo-show?id=34072&tdsourcetag=s_pcqq_aiomsg、 https://www.17sucai.com/pins/demo-show?id=21619&tdsourcetag=s_pcqq_aiomsg

<<返回首页<<