跨年煙花代碼合集【含動態展示效果及網盤代碼下載】

由于代碼過長 所以以下展示代碼均為部分代碼 有興趣的小伙伴可以點贊收藏本文關注文末公眾號回復【跨年煙花代碼】即可獲得全部原始碼
小伙伴們的關注和三連就是咱繼續創作的動力呀嘿嘿 下面為全部跨年煙花代碼效果展示------>HTML5跨年煙花合集演示

一下只展示部分效果圖

1.HTML5夜景放煙花綻放影片效果

部分代碼展示:

<div style="height:700px;overflow:hidden;">

	<canvas id='cas' style="background-color:rgba(0,5,24,1);">瀏覽器不支持canvas</canvas>
	<div class="city"><img src="img/city.png" alt="" /></div>
	<img src="img/moon.png" alt="" id="moon" style="visibility: hidden;"/>
	<div style="display:none">
		<div class="shape">新年快樂</div>
		<div class="shape">合家幸福</div>
        <div class="shape">萬事如意</div>
        <div class="shape">心想事成</div>
        <div class="shape">財源廣進</div>
	</div>
	
</div>

2.指哪打哪的HTML5+JS煙花特效

部分代碼展示:

window.requestAnimFrame = ( function() {
	return window.requestAnimationFrame ||
				window.webkitRequestAnimationFrame ||
				window.mozRequestAnimationFrame ||
				function( callback ) {
					window.setTimeout( callback, 1000 / 60 );
				};
})();

// now we will setup our basic variables for the demo
var canvas = document.getElementById( 'canvas' ),
		ctx = canvas.getContext( '2d' ),
		// full screen dimensions
		cw = window.innerWidth,
		ch = window.innerHeight,
		// firework collection
		fireworks = [],
		// particle collection
		particles = [],
		// starting hue
		hue = 120,
		// when launching fireworks with a click, too many get launched at once without a limiter, one launch per 5 loop ticks
		limiterTotal = 5,
		limiterTick = 0,
		// this will time the auto launches of fireworks, one launch per 80 loop ticks
		timerTotal = 80,
		timerTick = 0,
		mousedown = false,
		// mouse x coordinate,
		mx,
		// mouse y coordinate
		my;

3.HTML5點擊泡沫橫飛煙花特效

部分代碼展示:

<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript" src="js/Stats.min.js"></script>

<canvas id="canvas"></canvas>

<div id="stats"></div>

<div class="instructions">點擊頁面</div>

4.Canvas繪制3D煙花影片特效

部分代碼展示:

<canvas id="canvas"></canvas><script>
function initVars(){

	pi=Math.PI;
	ctx=canvas.getContext("2d");
	canvas.width=canvas.clientWidth;
	canvas.height=canvas.clientHeight;
	cx=canvas.width/2;
	cy=canvas.height/2;
	playerZ=-25;
	playerX=playerY=playerVX=playerVY=playerVZ=pitch=yaw=pitchV=yawV=0;
	scale=600;
	seedTimer=0;seedInterval=5,seedLife=100;gravity=.02;
	seeds=new Array();
	sparkPics=new Array();
	s="https://cantelope.org/NYE/";
	for(i=1;i<=10;++i){
		sparkPic=new Image();
		sparkPic.src=s+"spark"+i+".png";
		sparkPics.push(sparkPic);
	}
	sparks=new Array();
	pow1=new Audio(s+"pow1.ogg");
	pow2=new Audio(s+"pow2.ogg");
	pow3=new Audio(s+"pow3.ogg");
	pow4=new Audio(s+"pow4.ogg");
	frames = 0;
}

5.HTML5點擊頁面煙花綻放特效

部分代碼展示:

<canvas id=c></canvas><script>
webgl.vertexShaderSource = `
uniform int u_mode;
uniform vec2 u_res;
attribute vec4 a_data;
varying vec4 v_color;

vec3 h2rgb( float h ){
	return clamp( abs( mod( h * 6. + vec3( 0, 4, 2 ), 6. ) - 3. ) -1., 0., 1. );
}
void clear(){
	gl_Position = vec4( a_data.xy, 0, 1 );
	v_color = vec4( 0, 0, 0, a_data.w );
}
void draw(){
	gl_Position = vec4( vec2( 1, -1 ) * ( ( a_data.xy / u_res ) * 2. - 1. ), 0, 1 );
	v_color = vec4( h2rgb( a_data.z ), a_data.w );
}
void main(){
	if( u_mode == 0 )
		draw();
	else
		clear();
}

掃下方二維碼回復【跨年煙花代碼】獲取全部原始碼