devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

html5 canvas带音效的新年烟花特效，真的好看极了_var textstring = 'happylunarnewyear2022';

作者：小蓝xlanll | 2024-02-15 15:15:37

赞

踩

var textstring = 'happylunarnewyear2022';

花了半个小时写的代码，这个html5 canvas新年烟花一定不会让大家失望！

首先我们看下静态的效果图：

文章末尾有动态的效果图，滑动即可看到！ 

如果大家源码下载效果出不来可以加我的前端学习群：733581373（可以下载烟花源码以及直播学习编程技术）！

JavaScript代码如下：

  1. $(function() {
  2. 	var canvas = $('#canvas')[0];
  3. 	canvas.width = $(window).width();
  4. 	canvas.height = $(window).height();
  5. 	var ctx = canvas.getContext('2d');
  6.  
  7. 	// resize
  8. 	$(window).on('resize', function() {
  9. 		canvas.width = $(window).width();
  10. 		canvas.height = $(window).height();
  11. 		ctx.fillStyle = '#000003';
  12. 		ctx.fillRect(0, 0, canvas.width, canvas.height);
  13. 		center = { x: canvas.width / 2, y: canvas.height / 2 };
  14. 	});
  15.  
  16. 	// init
  17. 	ctx.fillStyle = '#000003';
  18. 	ctx.fillRect(0, 0, canvas.width, canvas.height);
  19. 	// objects
  20. 	var listFire = [];
  21. 	var listFirework = [];
  22. 	var listText = [];
  23. 	var listSpecial = [];
  24. 	var listSpark = [];
  25. 	var lights = [];
  26. 	var fireNumber = 10;
  27. 	var center = { x: canvas.width / 2, y: canvas.height / 2 };
  28. 	var range = 100;
  29. 	var fired = 0;
  30. 	var onHold = 0;
  31. 	var supprise = false;
  32. 	var textIndex = 0;
  33. 	var actions = [makeDoubleFullCircleFirework, makePlanetCircleFirework, makeFullCircleFirework, makeDoubleCircleFirework, makeHeartFirework, makeCircleFirework, makeRandomFirework];
  34. 	for (var i = 0; i < fireNumber; i++) {
  35. 		var fire = {
  36. 			x: Math.random() * range / 2 - range / 4 + center.x,
  37. 			y: Math.random() * range * 2.5 + canvas.height,
  38. 			size: Math.random() + 0.5,
  39. 			fill: '#ff3',
  40. 			vx: Math.random() - 0.5,
  41. 			vy: -(Math.random() + 4),
  42. 			ax: Math.random() * 0.06 - 0.03,
  43. 			delay: Math.round(Math.random() * range) + range * 4,
  44. 			hold: false,
  45. 			alpha: 1,
  46. 			far: Math.random() * range + (center.y - range)
  47. 		};
  48. 		fire.base = {
  49. 			x: fire.x,
  50. 			y: fire.y,
  51. 			vx: fire.vx,
  52. 			vy: fire.vy
  53. 		};
  54. 		//
  55. 		listFire.push(fire);
  56. 		// play sound
  57. 		playLaunchSound();
  58. 	}
  59. 	// define array of sound
  60. 	var listExpSound = $('audio.exp');
  61. 	var listLaunchSound = $('audio.launch');
  62.  
  63. 	// define array position of text
  64. 	var textString = 'happylunarnewyear2018';
  65. 	var textMatrix = [
  66. 		4.5, 0, 5.5, 0, 6.5, 0, 7.5, 0, 8.5, 0,
  67. 		0, 1, 1, 1, 2, 1, 3, 1, 4, 1, 6, 1, 7, 1, 8, 1, 10, 1, 11, 1, 12, 1, 13, 1,
  68. 		5, 2, 6, 2, 7, 2, 8, 2
  69. 	]
  70. 	var chars = {
  71. 		h: [
  72. 			0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
  73. 			1, 3, 2, 3, 3, 3, 4, 3,
  74. 			5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6, 5, 7
  75. 		],
  76. 		a: [
  77. 			2, 0, 2, 1, 2, 2, 1, 2, 1, 3, 1, 4, 1, 5, 0, 5, 0, 6, 0, 7, 2, 5,
  78. 			3, 0, 3, 1, 3, 2, 4, 2, 4, 3, 4, 4, 4, 1, 5, 5, 5, 6, 5, 7, 3, 5
  79. 		],
  80. 		p: [
  81. 			0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
  82. 			1, 0, 2, 0, 3, 0, 4, 1, 5, 2, 4, 3, 3, 4, 2, 4, 1, 4
  83. 		],
  84. 		y: [
  85. 			0, 0, 0, 1, 1, 1, 1, 2, 1, 3, 2, 3, 2, 4, 2, 5, 2, 6, 2, 7,
  86. 			3, 2, 3, 3, 4, 1, 4, 2, 5, 0, 5, 1
  87. 		],
  88. 		l: [
  89. 			0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
  90. 			1, 7, 2, 7, 3, 7, 4, 7, 5, 7
  91. 		],
  92. 		u: [
  93. 			0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6,
  94. 			1, 7, 2, 7, 3, 7, 4, 7,
  95. 			5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6
  96. 		],
  97. 		n: [
  98. 			0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
  99. 			1, 1, 1, 2, 2, 2, 2, 3, 2, 4, 3, 4, 3, 5, 4, 5, 4, 6,
  100. 			5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6, 5, 7
  101. 		],
  102. 		e: [
  103. 			0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
  104. 			1, 0, 2, 0, 3, 0, 4, 0, 5, 0,
  105. 			1, 3, 2, 3, 3, 3, 4, 3,
  106. 			1, 7, 2, 7, 3, 7, 4, 7, 5, 7
  107. 		],
  108. 		w: [
  109. 			0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 1, 6,
  110. 			2, 1, 2, 2, 2, 3, 2, 4, 2, 5, 2, 6, 2, 7, 3, 7,
  111. 			5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 4, 5, 4, 6
  112. 		],
  113. 		r: [
  114. 			0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
  115. 			1, 0, 2, 0, 3, 0, 4, 1, 5, 2, 4, 3, 3, 4, 2, 4, 1, 4,
  116. 			1, 5, 2, 5, 3, 6, 4, 6, 5, 7
  117. 		],
  118. 		2: [
  119. 			0, 1, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 5, 1, 5, 2, 5, 3,
  120. 			4, 3, 3, 3, 2, 3, 2, 4, 1, 4, 1, 5,
  121. 			0, 5, 0, 6, 0, 7, 1, 7, 2, 7, 3, 7, 4, 7, 5, 7, 5, 6
  122. 		],
  123. 		0: [
  124. 			0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6,
  125. 			1, 0, 2, 0, 3, 0, 4, 0,
  126. 			1, 7, 2, 7, 3, 7, 4, 7,
  127. 			5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6
  128. 		],
  129. 		1: [
  130. 			1, 2, 2, 2, 2, 1, 3, 1, 3, 0,
  131. 			4, 0, 4, 1, 4, 2, 4, 3, 4, 4, 4, 5, 4, 6, 4, 7,
  132. 			1, 7, 2, 7, 3, 7, 5, 7
  133. 		],
  134. 		7: [
  135. 			0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0,
  136. 			5, 1, 5, 2, 5, 3, 4, 3, 4, 4,
  137. 			3, 4, 3, 5, 3, 6, 3, 7
  138. 		]
  139. 	}
  140.  
  141. 	function initText() {
  142. 		var i = textIndex;
  143. 		var velocity = Math.random() * 0.25 + 1;
  144. 		var shift = { x: -(Math.random() + 2), y: -(Math.random() + 3) };
  145. 		var char = chars[textString[i]];
  146. 		var width = 80;
  147. 		var half = 6.5 * width;
  148. 		var left = textMatrix[i * 2] * width - half;
  149. 		var top = textMatrix[i * 2 + 1] * range * 1.2 - range * 2.4;
  150. 		for (var j = 0; j < fireNumber * char.length * 0.25; j++) {
  151. 			var rand = Math.floor(Math.random() * char.length * 0.5);
  152. 			var x = char[rand * 2] + shift.x;
  153. 			var y = char[rand * 2 + 1] + shift.y;
  154. 			var text = {
  155. 				x: center.x + left * 0.9,
  156. 				y: center.y + top,
  157. 				left: center.x + left,
  158. 				size: Math.random() + 0.5,
  159. 				fill: '#ff3',
  160. 				vx: x * (velocity + (Math.random() - 0.5) * 0.5),
  161. 				vy: y * (velocity + (Math.random() - 0.5) * 0.5),
  162. 				ay: 0.08,
  163. 				alpha: 1,
  164. 				life: Math.round(Math.random() * range / 2) + range / 1.5
  165. 			}
  166. 			text.base = {
  167. 				life: text.life,
  168. 				size: text.size,
  169. 			};
  170. 			text.direct = (text.left - text.x) * 0.08;
  171. 			listText.push(text);
  172. 		}
  173. 		// play sound
  174. 		playExpSound();
  175. 		//
  176. 		lights.push({ x: center.x + left * 0.9, y: center.y + top, color: text.fill, radius: range * 2 });
  177. 		if (++textIndex < textString.length) {
  178. 			setTimeout(initText, 10);
  179. 		}
  180. 		else {
  181. 			textIndex = 0;
  182. 		}
  183. 	}
  184.  
  185. 	function initSpark() {
  186. 		var x = Math.random() * range * 3 - range * 1.5 + center.x;
  187. 		var vx = Math.random() - 0.5;
  188. 		var vy = -(Math.random() + 4);
  189. 		var ax = Math.random() * 0.04 - 0.02;
  190. 		var far = Math.random() * range * 4 - range + center.y;
  191. 		var direct = ax * 10 * Math.PI;
  192. 		var max = fireNumber * 0.5;
  193. 		for (var i = 0; i < max; i++) {
  194. 			var special = {
  195. 				x: x,
  196. 				y: Math.random() * range * 0.25 + canvas.height,
  197. 				size: Math.random() + 2,
  198. 				fill: '#ff3',
  199. 				vx: vx,
  200. 				vy: vy,
  201. 				ax: ax,
  202. 				direct: direct,
  203. 				alpha: 1
  204. 			};
  205. 			special.far = far - (special.y - canvas.height);
  206. 			listSpecial.push(special);
  207. 			// play sound
  208. 			playLaunchSound();
  209. 		}
  210. 	}
  211.  
  212. 	function randColor() {
  213. 		var r = Math.floor(Math.random() * 256);
  214. 		var g = Math.floor(Math.random() * 256);
  215. 		var b = Math.floor(Math.random() * 256);
  216. 		var color = 'rgb($r, $g, $b)';
  217. 		color = color.replace('$r', r);
  218. 		color = color.replace('$g', g);
  219. 		color = color.replace('$b', b);
  220. 		return color;
  221. 	}
  222.  
  223. 	function playExpSound() {
  224. 		var sound = listExpSound[Math.floor(Math.random() * listExpSound.length)];
  225. 		sound.volume = Math.random() * 0.4 + 0.1;
  226. 		sound.play();
  227. 	}
  228.  
  229. 	function playLaunchSound() {
  230. 		setTimeout(function() {
  231. 			var sound = listLaunchSound[Math.floor(Math.random() * listLaunchSound.length)];
  232. 			sound.volume = 0.05;
  233. 			sound.play();
  234. 		}, 200);
  235. 	}
  236.  
  237. 	function makeCircleFirework(fire) {
  238. 		var color = randColor();
  239. 		var velocity = Math.random() * 2 + 6;
  240. 		var max = fireNumber * 5;
  241. 		for (var i = 0; i < max; i++) {
  242. 			var rad = (i * Math.PI * 2) / max;
  243. 			var firework = {
  244. 				x: fire.x,
  245. 				y: fire.y,
  246. 				size: Math.random() + 1.5,
  247. 				fill: color,
  248. 				vx: Math.cos(rad) * velocity + (Math.random() - 0.5) * 0.5,
  249. 				vy: Math.sin(rad) * velocity + (Math.random() - 0.5) * 0.5,
  250. 				ay: 0.04,
  251. 				alpha: 1,
  252. 				life: Math.round(Math.random() * range / 2) + range / 2
  253. 			};
  254. 			firework.base = {
  255. 				life: firework.life,
  256. 				size: firework.size
  257. 			};
  258. 			listFirework.push(firework);
  259. 		}
  260. 		return color;
  261. 	}
  262.  
  263. 	function makeDoubleCircleFirework(fire) {
  264. 		var color = randColor();
  265. 		var velocity = Math.random() * 2 + 8;
  266. 		var max = fireNumber * 3;
  267. 		for (var i = 0; i < max; i++) {
  268. 			var rad = (i * Math.PI * 2) / max;
  269. 			var firework = {
  270. 				x: fire.x,
  271. 				y: fire.y,
  272. 				size: Math.random() + 1.5,
  273. 				fill: color,
  274. 				vx: Math.cos(rad) * velocity + (Math.random() - 0.5) * 0.5,
  275. 				vy: Math.sin(rad) * velocity + (Math.random() - 0.5) * 0.5,
  276. 				ay: 0.04,
  277. 				alpha: 1,
  278. 				life: Math.round(Math.random() * range / 2) + range / 1.5
  279. 			};
  280. 			firework.base = {
  281. 				life: firework.life,
  282. 				size: firework.size
  283. 			};
  284. 			listFirework.push(firework);
  285. 		}
  286. 		color = randColor();
  287. 		velocity = Math.random() * 3 + 4;
  288. 		for (var i = 0; i < max; i++) {
  289. 			var rad = (i * Math.PI * 2) / max;
  290. 			var firework = {
  291. 				x: fire.x,
  292. 				y: fire.y,
  293. 				size: Math.random() + 1.5,
  294. 				fill: color,
  295. 				vx: Math.cos(rad) * velocity + (Math.random() - 0.5) * 0.5,
  296. 				vy: Math.sin(rad) * velocity + (Math.random() - 0.5) * 0.5,
  297. 				ay: 0.04,
  298. 				alpha: 1,
  299. 				life: Math.round(Math.random() * range / 2) + range / 1.5
  300. 			};
  301. 			firework.base = {
  302. 				life: firework.life,
  303. 				size: firework.size
  304. 			};
  305. 			listFirework.push(firework);
  306. 		}
  307. 		return color;
  308. 	}
  309.  
  310. 	function makePlanetCircleFirework(fire) {
  311. 		var color = '#aa0609';
  312. 		var velocity = Math.random() * 2 + 4;
  313. 		var max = fireNumber * 2;
  314. 		for (var i = 0; i < max; i++) {
  315. 			var rad = (i * Math.PI * 2) / max;
  316. 			var firework = {
  317. 				x: fire.x,
  318. 				y: fire.y,
  319. 				size: Math.random() + 1.5,
  320. 				fill: color,
  321. 				vx: Math.cos(rad) * velocity + (Math.random() - 0.5) * 0.5,
  322. 				vy: Math.sin(rad) * velocity + (Math.random() - 0.5) * 0.5,
  323. 				ay: 0.04,
  324. 				alpha: 1,
  325. 				life: Math.round(Math.random() * range / 2) + range / 1.5
  326. 			};
  327. 			firework.base = {
  328. 				life: firework.life,
  329. 				size: firework.size
  330. 			};
  331. 			listFirework.push(firework);
  332. 		}
  333. 		max = fireNumber * 4;
  334. 		for (var i = 0; i < max; i++) {
  335. 			var rad = (i * Math.PI * 2) / max;
  336. 			var firework = {
  337. 				x: fire.x,
  338. 				y: fire.y,
  339. 				size: Math.random() + 1.5,
  340. 				fill: color,
  341. 				vx: Math.cos(rad) * velocity * Math.random(),
  342. 				vy: Math.sin(rad) * velocity * Math.random(),
  343. 				ay: 0.04,
  344. 				alpha: 1,
  345. 				life: Math.round(Math.random() * range / 2) + range / 1.5
  346. 			};
  347. 			firework.base = {
  348. 				life: firework.life,
  349. 				size: firework.size
  350. 			};
  351. 			listFirework.push(firework);
  352. 		}
  353. 		max = fireNumber * 3;
  354. 		color = '#ff9';
  355. 		var rotate = Math.random() * Math.PI * 2;
  356. 		var vx = velocity *  (Math.random() + 2);
  357. 		var vy = velocity * 0.6;
  358. 		for (var i = 0; i < max; i++) {
  359. 			var rad = (i * Math.PI * 2) / max;
  360. 			// calc x, y for ellipse
  361. 			var cx = Math.cos(rad) * vx + (Math.random() - 0.5) * 0.5;
  362. 			var cy = Math.sin(rad) * vy + (Math.random() - 0.5) * 0.5;
  363. 			var firework = {
  364. 				x: fire.x,
  365. 				y: fire.y,
  366. 				size: Math.random() + 1.5,
  367. 				fill: color,
  368. 				vx: cx * Math.cos(rotate) - cy * Math.sin(rotate), // rotate x ellipse
  369. 				vy: cx * Math.sin(rotate) + cy * Math.cos(rotate), // rotate y ellipse
  370. 				ay: 0.02,
  371. 				alpha: 1,
  372. 				life: Math.round(Math.random() * range / 2) + range / 1.5
  373. 			};
  374. 			firework.base = {
  375. 				life: firework.life,
  376. 				size: firework.size
  377. 			};
  378. 			listFirework.push(firework);
  379. 		}
  380. 		return '#aa0609';
  381. 	}
  382.  
  383. 	function makeFullCircleFirework(fire) {
  384. 		var color = randColor();
  385. 		var velocity = Math.random() * 8 + 8;
  386. 		var max = fireNumber * 3;
  387. 		for (var i = 0; i < max; i++) {
  388. 			var rad = (i * Math.PI * 2) / max;
  389. 			var firework = {
  390. 				x: fire.x,
  391. 				y: fire.y,
  392. 				size: Math.random() + 1.5,
  393. 				fill: color,
  394. 				vx: Math.cos(rad) * velocity + (Math.random() - 0.5) * 0.5,
  395. 				vy: Math.sin(rad) * velocity + (Math.random() - 0.5) * 0.5,
  396. 				ay: 0.06,
  397. 				alpha: 1,
  398. 				life: Math.round(Math.random() * range / 2) + range / 1.5
  399. 			};
  400. 			firework.base = {
  401. 				life: firework.life,
  402. 				size: firework.size
  403. 			};
  404. 			listFirework.push(firework);
  405. 		}
  406. 		max = fireNumber * Math.round(Math.random() * 4 + 4);
  407. 		for (var i = 0; i < max; i++) {
  408. 			var rad = (i * Math.PI * 2) / max;
  409. 			var firework = {
  410. 				x: fire.x,
  411. 				y: fire.y,
  412. 				size: Math.random() + 1.5,
  413. 				fill: color,
  414. 				vx: Math.cos(rad) * velocity * Math.random(),
  415. 				vy: Math.sin(rad) * velocity * Math.random(),
  416. 				ay: 0.06,
  417. 				alpha: 1,
  418. 				life: Math.round(Math.random() * range / 2) + range / 1.5
  419. 			};
  420. 			firework.base = {
  421. 				life: firework.life,
  422. 				size: firework.size
  423. 			};
  424. 			listFirework.push(firework);
  425. 		}
  426. 		return color;
  427. 	}
  428.  
  429. 	function makeDoubleFullCircleFirework(fire) {
  430. 		var color = randColor();
  431. 		var velocity = Math.random() * 8 + 8;
  432. 		var max = fireNumber * 3;
  433. 		for (var i = 0; i < max; i++) {
  434. 			var rad = (i * Math.PI * 2) / max;
  435. 			var firework = {
  436. 				x: fire.x,
  437. 				y: fire.y,
  438. 				size: Math.random() + 1.5,
  439. 				fill: color,
  440. 				vx: Math.cos(rad) * velocity + (Math.random() - 0.5) * 0.5,
  441. 				vy: Math.sin(rad) * velocity + (Math.random() - 0.5) * 0.5,
  442. 				ay: 0.04,
  443. 				alpha: 1,
  444. 				life: Math.round(Math.random() * range / 2) + range / 1.5
  445. 			};
  446. 			firework.base = {
  447. 				life: firework.life,
  448. 				size: firework.size
  449. 			};
  450. 			listFirework.push(firework);
  451. 		}
  452. 		color = randColor();
  453. 		velocity = Math.random() * 3 + 4;
  454. 		max = fireNumber * 2;
  455. 		for (var i = 0; i < max; i++) {
  456. 			var rad = (i * Math.PI * 2) / max;
  457. 			var firework = {
  458. 				x: fire.x,
  459. 				y: fire.y,
  460. 				size: Math.random() + 1.5,
  461. 				fill: color,
  462. 				vx: Math.cos(rad) * velocity + (Math.random() - 0.5) * 0.5,
  463. 				vy: Math.sin(rad) * velocity + (Math.random() - 0.5) * 0.5,
  464. 				ay: 0.06,
  465. 				alpha: 1,
  466. 				life: Math.round(Math.random() * range / 2) + range / 1.5
  467. 			};
  468. 			firework.base = {
  469. 				life: firework.life,
  470. 				size: firework.size
  471. 			};
  472. 			listFirework.push(firework);
  473. 		}
  474. 		max = fireNumber * 4;
  475. 		for (var i = 0; i < max; i++) {
  476. 			var rad = (i * Math.PI * 2) / max;
  477. 			var firework = {
  478. 				x: fire.x,
  479. 				y: fire.y,
  480. 				size: Math.random() + 1.5,
  481. 				fill: color,
  482. 				vx: Math.cos(rad) * velocity * Math.random(),
  483. 				vy: Math.sin(rad) * velocity * Math.random(),
  484. 				ay: 0.06,
  485. 				alpha: 1,
  486. 				life: Math.round(Math.random() * range / 2) + range / 1.5
  487. 			};
  488. 			firework.base = {
  489. 				life: firework.life,
  490. 				size: firework.size
  491. 			};
  492. 			listFirework.push(firework);
  493. 		}
  494. 		return color;
  495. 	}
  496.  
  497. 	function makeHeartFirework(fire) {
  498. 		var color = randColor();
  499. 		var velocity = Math.random() * 3 + 3;
  500. 		var max = fireNumber * 5;
  501. 		var rotate = Math.random() * Math.PI * 2;
  502. 		for (var i = 0; i < max; i++) {
  503. 			var rad = (i * Math.PI * 2) / max + rotate;
  504. 			var v, p;
  505. 			if (rad - rotate < Math.PI * 0.5) {
  506. 				p = (rad - rotate) / (Math.PI * 0.5);
  507. 				v = velocity + velocity * p;
  508. 			}
  509. 			else if (rad - rotate > Math.PI * 0.5 && rad - rotate < Math.PI) {
  510. 				p = (rad - rotate - Math.PI * 0.5) / (Math.PI * 0.5);
  511. 				v = velocity * (2 - p);
  512. 			}
  513. 			else if (rad - rotate > Math.PI && rad - rotate < Math.PI * 1.5) {
  514. 				p = (rad - rotate - Math.PI) / (Math.PI * 0.5);
  515. 				v = velocity * (1 - p);
  516. 			}
  517. 			else if (rad - rotate > Math.PI * 1.5 && rad - rotate < Math.PI * 2) {
  518. 				p = (rad - rotate - Math.PI * 1.5) / (Math.PI * 0.5);
  519. 				v = velocity * p;
  520. 			}
  521. 			else {
  522. 				v = velocity;
  523. 			}
  524. 			v = v + (Math.random() - 0.5) * 0.25;
  525. 			var firework = {
  526. 				x: fire.x,
  527. 				y: fire.y,
  528. 				size: Math.random() + 1.5,
  529. 				fill: color,
  530. 				vx: Math.cos(rad) * v,
  531. 				vy: Math.sin(rad) * v,
  532. 				ay: 0.02,
  533. 				alpha: 1,
  534. 				life: Math.round(Math.random() * range / 2) + range / 1.5
  535. 			};
  536. 			firework.base = {
  537. 				life: firework.life,
  538. 				size: firework.size
  539. 			};
  540. 			listFirework.push(firework);
  541. 		}
  542. 		return color;
  543. 	}
  544.  
  545. 	function makeRandomFirework(fire) {
  546. 		var color = randColor();
  547. 		for (var i = 0; i < fireNumber * 5; i++) {
  548. 			var firework = {
  549. 				x: fire.x,
  550. 				y: fire.y,
  551. 				size: Math.random() + 1.5,
  552. 				fill: color,
  553. 				vx: Math.random() * 15 - 7.5,
  554. 				vy: Math.random() * -15 + 5,
  555. 				ay: 0.05,
  556. 				alpha: 1,
  557. 				life: Math.round(Math.random() * range / 2) + range / 2
  558. 			};
  559. 			firework.base = {
  560. 				life: firework.life,
  561. 				size: firework.size
  562. 			};
  563. 			listFirework.push(firework);
  564. 		}
  565. 		return color;
  566. 	}
  567.  
  568. 	function makeSpark(special) {
  569. 		var color = special.fill;
  570. 		var velocity = Math.random() * 6 + 12;
  571. 		var max = fireNumber;
  572. 		for (var i = 0; i < max; i++) {
  573. 			var rad = (Math.random() * Math.PI * 0.3 + Math.PI * 0.35) + Math.PI + special.direct;
  574. 			var spark = {
  575. 				x: special.x,
  576. 				y: special.y,
  577. 				size: Math.random() + 1,
  578. 				fill: color,
  579. 				vx: Math.cos(rad) * velocity + (Math.random() - 0.5) * 0.5,
  580. 				vy: Math.sin(rad) * velocity + (Math.random() - 0.5) * 0.5,
  581. 				ay: 0.02,
  582. 				alpha: 1,
  583. 				rad: rad,
  584. 				direct: special.direct,
  585. 				chain: Math.round(Math.random() * 2) + 2,
  586. 				life: Math.round(Math.random() * range / 2) + range / 2
  587. 			};
  588. 			spark.base = {
  589. 				life: spark.life,
  590. 				velocity: velocity
  591. 			};
  592. 			listSpark.push(spark);
  593. 		}
  594. 		return color;
  595. 	}
  596.  
  597. 	function chainSpark(parentSpark) {
  598. 		var color = parentSpark.fill;
  599. 		if (parentSpark.chain > 0) {
  600. 			var velocity = parentSpark.base.velocity * 0.6;
  601. 			var max = Math.round(Math.random() * 5);
  602. 			for (var i = 0; i < max; i++) {
  603. 				var rad = (Math.random() * Math.PI * 0.3 - Math.PI * 0.15) + parentSpark.rad + parentSpark.direct;
  604. 				var spark = {
  605. 					x: parentSpark.x,
  606. 					y: parentSpark.y,
  607. 					size: parentSpark.size * 0.6,
  608. 					fill: color,
  609. 					vx: Math.cos(rad) * velocity + (Math.random() - 0.5) * 0.5,
  610. 					vy: Math.sin(rad) * velocity + (Math.random() - 0.5) * 0.5,
  611. 					ay: 0.02,
  612. 					alpha: 1,
  613. 					rad: rad,
  614. 					direct: parentSpark.direct,
  615. 					chain: parentSpark.chain,
  616. 					life: parentSpark.base.life * 0.8
  617. 				};
  618. 				spark.base = {
  619. 					life: spark.life,
  620. 					size: spark.size,
  621. 					velocity: velocity
  622. 				};
  623. 				listSpark.push(spark);
  624. 			}
  625.  
  626. 			if (Math.random() > 0.9 && parentSpark.chain > 1) {
  627. 				// play sound
  628. 				playExpSound();
  629. 			}
  630. 		}
  631. 		return color;
  632. 	}
  633.  
  634. 	(function loop() {
  635. 		requestAnimationFrame(loop);
  636. 		update();
  637. 		draw();
  638. 	})();
  639.  
  640. 	function update() {
  641. 		// update fire logic
  642. 		for (var i = 0; i < listFire.length; i++) {
  643. 			var fire = listFire[i];
  644. 			//
  645. 			if (fire.y <= fire.far) {
  646. 				// play sound
  647. 				playExpSound();
  648. 				// case add firework
  649. 				fired++;
  650. 				var color = actions[Math.floor(Math.random() * actions.length)](fire);
  651. 				// light
  652. 				lights.push({ x: fire.x, y: fire.y, color: color, radius: range * 2 });
  653. 				// reset
  654. 				fire.y = fire.base.y;
  655. 				fire.x = fire.base.x;
  656. 				// special
  657. 				if (fired % 33 == 0) {
  658. 					initSpark();
  659. 				}
  660. 				// on hold
  661. 				supprise = fired % 100 == 0 ? true : supprise;
  662. 				if (supprise) {
  663. 					fire.vx = 0;
  664. 					fire.vy = 0;
  665. 					fire.ax = 0;
  666. 					fire.hold = true;
  667. 					onHold++;
  668. 				}
  669. 				else {
  670. 					fire.vx = fire.base.vx;
  671. 					fire.vy = fire.base.vy;
  672. 					fire.ax = Math.random() * 0.06 - 0.03;
  673. 					// play sound
  674. 					playLaunchSound();
  675. 				}
  676. 			}
  677. 			//
  678. 			if (fire.hold && fire.delay <= 0) {
  679. 				onHold--;
  680. 				fire.hold = false;
  681. 				fire.delay = Math.round(Math.random() * range) + range * 4;
  682. 				fire.vx = fire.base.vx;
  683. 				fire.vy = fire.base.vy;
  684. 				fire.ax = Math.random() * 0.06 - 0.03;
  685. 				fire.alpha = 1;
  686. 				// play sound
  687. 				playLaunchSound();
  688. 			}
  689. 			else if (fire.hold && fire.delay > 0) {
  690. 				fire.delay--;
  691. 			}
  692. 			else {
  693. 				fire.x += fire.vx;
  694. 				fire.y += fire.vy;
  695. 				fire.vx += fire.ax;
  696. 				fire.alpha = (fire.y - fire.far) / fire.far;
  697. 			}
  698. 		}
  699.  
  700. 		// update firework logic
  701. 		for (var i = listFirework.length - 1; i >= 0; i--) {
  702. 			var firework = listFirework[i];
  703. 			if (firework) {
  704. 				firework.vx *= 0.9;
  705. 				firework.vy *= 0.9;
  706. 				firework.x += firework.vx;
  707. 				firework.y += firework.vy;
  708. 				firework.vy += firework.ay;
  709. 				firework.alpha = firework.life / firework.base.life;
  710. 				firework.size = firework.alpha * firework.base.size;
  711. 				firework.alpha = firework.alpha > 0.6 ? 1 : firework.alpha;
  712. 				//
  713. 				firework.life--;
  714. 				if (firework.life <= 0) {
  715. 					listFirework.splice(i, 1);
  716. 				}
  717. 			}
  718. 		}
  719.  
  720. 		// supprise happy new year!
  721. 		if (supprise && onHold == 10) {
  722. 			supprise = false;
  723. 			setTimeout(initText, 3000);
  724. 		}
  725.  
  726. 		// update text logic
  727. 		for (var i = listText.length - 1; i >= 0; i--) {
  728. 			var text = listText[i];
  729. 			text.vx *= 0.9;
  730. 			text.vy *= 0.9;
  731. 			text.direct *= 0.9;
  732. 			text.x += text.vx + text.direct;
  733. 			text.y += text.vy;
  734. 			text.vy += text.ay;
  735. 			text.alpha = text.life / text.base.life;
  736. 			text.size = text.alpha * text.base.size;
  737. 			text.alpha = text.alpha > 0.6 ? 1 : text.alpha;
  738. 			//
  739. 			text.life--;
  740. 			if (text.life <= 0) {
  741. 				listText.splice(i, 1);
  742. 			}
  743. 		}
  744.  
  745. 		// update special logic
  746. 		for (var i = listSpecial.length - 1; i >= 0; i--) {
  747. 			var special = listSpecial[i];
  748. 			if (special.y <= special.far) {
  749. 				// play sound
  750. 				playExpSound();
  751. 				// light
  752. 				lights.push({ x: special.x, y: special.y, color: special.fill, alpha: 0.02, radius: range * 2 });
  753. 				//
  754. 				makeSpark(special);
  755. 				// remove from list
  756. 				listSpecial.splice(i, 1);
  757. 			}
  758. 			else {
  759. 				special.x += special.vx;
  760. 				special.y += special.vy;
  761. 				special.vx += special.ax;
  762. 				special.alpha = (special.y - special.far) / special.far;
  763. 			}
  764. 		}
  765.  
  766. 		// update spark logic
  767. 		for (var i = listSpark.length - 1; i >= 0; i--) {
  768. 			var spark = listSpark[i];
  769. 			if (spark) {
  770. 				spark.vx *= 0.9;
  771. 				spark.vy *= 0.9;
  772. 				spark.x += spark.vx;
  773. 				spark.y += spark.vy;
  774. 				spark.vy += spark.ay;
  775. 				spark.alpha = spark.life / spark.base.life + 0.2;
  776. 				//
  777. 				spark.life--;
  778. 				if (spark.life < spark.base.life * 0.8 && spark.life > 0) {
  779. 					//
  780. 					spark.chain--;
  781. 					chainSpark(spark);
  782. 				}
  783. 				if (spark.life <= 0) {
  784. 					listSpark.splice(i, 1);
  785. 				}
  786. 			}
  787. 		}
  788. 	}
  789.  
  790. 	function draw() {
  791. 		// clear
  792. 		ctx.globalCompositeOperation = 'source-over';
  793. 		ctx.globalAlpha = 0.2;
  794. 		ctx.fillStyle = '#000003';
  795. 		ctx.fillRect(0, 0, canvas.width, canvas.height);
  796.  
  797. 		// re-draw
  798. 		ctx.globalCompositeOperation = 'screen';
  799. 		for (var i = 0; i < listFire.length; i++) {
  800. 			var fire = listFire[i];
  801. 			ctx.globalAlpha = fire.alpha;
  802. 			ctx.beginPath();
  803. 			ctx.arc(fire.x, fire.y, fire.size, 0, Math.PI * 2);
  804. 			ctx.closePath();
  805. 			ctx.fillStyle = fire.fill;
  806. 			ctx.fill();
  807. 		}
  808.  
  809. 		for (var i = 0; i < listFirework.length; i++) {
  810. 			var firework = listFirework[i];
  811. 			ctx.globalAlpha = firework.alpha;
  812. 			ctx.beginPath();
  813. 			ctx.arc(firework.x, firework.y, firework.size, 0, Math.PI * 2);
  814. 			ctx.closePath();
  815. 			ctx.fillStyle = firework.fill;
  816. 			ctx.fill();
  817. 		}
  818.  
  819. 		for (var i = 0; i < listSpecial.length; i++) {
  820. 			var special = listSpecial[i];
  821. 			ctx.globalAlpha = special.alpha;
  822. 			// ctx.beginPath();
  823. 			// ctx.arc(special.x, special.y, special.size, 0, Math.PI * 2);
  824. 			// ctx.closePath();
  825. 			// ctx.fill();
  826. 			ctx.fillStyle = special.fill;
  827. 			ctx.fillRect(special.x - special.size, special.y - special.size, special.size * 2, special.size *2);
  828. 		}
  829.  
  830. 		for (var i = 0; i < listSpark.length; i++) {
  831. 			var spark = listSpark[i];
  832. 			ctx.globalAlpha = spark.alpha;
  833. 			// ctx.beginPath();
  834. 			// ctx.arc(spark.x, spark.y, spark.size, 0, Math.PI * 2);
  835. 			// ctx.closePath();
  836. 			// ctx.fill();
  837. 			ctx.fillStyle = spark.fill;
  838. 			ctx.fillRect(spark.x - spark.size, spark.y - spark.size, spark.size * 2, spark.size *2);
  839. 		}
  840.  
  841. 		// light effect
  842. 		while (lights.length) {
  843. 			var light = lights.pop();
  844. 			var gradient = ctx.createRadialGradient(light.x, light.y, 0, light.x, light.y, light.radius);
  845. 			gradient.addColorStop(0, '#fff');
  846. 			gradient.addColorStop(0.2, light.color);
  847. 			gradient.addColorStop(0.8, 'rgba(0, 0, 0, 0)');
  848. 			gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
  849. 			ctx.globalAlpha = light.alpha ? light.alpha : 0.25;
  850. 			ctx.fillStyle = gradient;
  851. 			ctx.fillRect(light.x - light.radius, light.y - light.radius, light.radius * 2, light.radius * 2);
  852. 		}
  853.  
  854. 		// supprise: HAPPY LUNAR NEW YEAR 2018!
  855. 		for (var i = 0; i < listText.length; i++) {
  856. 			var text = listText[i];
  857. 			ctx.globalAlpha = text.alpha;
  858. 			ctx.fillStyle = text.fill;
  859. 			ctx.fillRect(text.x - text.size, text.y - text.size, text.size * 2, text.size * 2);
  860. 		}
  861. 	}
  862. })

index首页代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en" >
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>新年快乐</title>
  6. <link rel="stylesheet" href="css/style.css">
  7. </head>
  8.  
  9. <body>
  10.  
  11. <canvas id="canvas"></canvas>
  12.  
  13. <div class="block-audio">
  14.   <audio class="exp" src="m/exp1.mp3" controls></audio>
  15.   <audio class="exp" src="m/exp1.mp3" controls></audio>
  16.   <audio class="exp" src="m/exp1.mp3" controls></audio>
  17.   <audio class="exp" src="m/exp2.mp3" controls></audio>
  18.   <audio class="exp" src="m/exp2.mp3" controls></audio>
  19.   <audio class="exp" src="m/exp2.mp3" controls></audio>
  20.   <audio class="exp" src="m/exp3.mp3" controls></audio>
  21.   <audio class="exp" src="m/exp3.mp3" controls></audio>
  22.   <audio class="exp" src="m/exp3.mp3" controls></audio>
  23.   <audio class="exp" src="m/exp4.mp3" controls></audio>
  24.   <audio class="exp" src="m/exp4.mp3" controls></audio>
  25.   <audio class="exp" src="m/exp4.mp3" controls></audio>
  26.   <audio class="exp" src="m/exp5.mp3" controls></audio>
  27.   <audio class="exp" src="m/exp5.mp3" controls></audio>
  28.   <audio class="exp" src="m/exp5.mp3" controls></audio>
  29.   <audio class="exp" src="m/exp6.mp3" controls></audio>
  30.   <audio class="exp" src="m/exp6.mp3" controls></audio>
  31.   <audio class="exp" src="m/exp6.mp3" controls></audio>
  32.   <audio class="exp" src="m/exp7.mp3" controls></audio>
  33.   <audio class="exp" src="m/exp7.mp3" controls></audio>
  34.   <audio class="exp" src="m/exp7.mp3" controls></audio>
  35.   <audio class="exp" src="m/exp8.mp3" controls></audio>
  36.   <audio class="exp" src="m/exp8.mp3" controls></audio>
  37.   <audio class="exp" src="m/exp8.mp3" controls></audio>
  38.   <audio class="launch" src="m/launch1.mp3" controls></audio>
  39.   <audio class="launch" src="m/launch1.mp3" controls></audio>
  40.   <audio class="launch" src="m/launch2.mp3" controls></audio>
  41.   <audio class="launch" src="m/launch2.mp3" controls></audio>
  42.   <audio class="launch" src="m/launch3.mp3" controls></audio>
  43.   <audio class="launch" src="m/launch3.mp3" controls></audio>
  44.   <audio class="launch" src="m/launch4.mp3" controls></audio>
  45.   <audio class="launch" src="m/launch4.mp3" controls></audio>
  46.   <audio class="launch" src="m/launch5.mp3" controls></audio>
  47.   <audio class="launch" src="m/launch5.mp3" controls></audio>
  48. </div>
  49.  
  50. <script type="text/javascript" src="js/jquery.min.js"></script>
  51. <script type="text/javascript" src="js/index.js"></script>
  52.  
  53. </body>
  54. </html>

css代码如下：

  1. canvas {
  2.   display: block;
  3. }
  4.  
  5. .block-audio {
  6.   display: none;
  7. }
  8. body{padding: 0px;margin: 0px}

最后运行烟花特效动态图如下：

 效果图有点模糊， 但是真的好看，大家可以拿到源码可以看看！

如果大家源码下载效果出不来可以加我的前端学习群：733581373（可以下载烟花源码以及直播学习编程技术）！

最后谢谢大家的支持！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/85288
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号