How to realize the special effects of fireworks and lucky words in JavaScript

This article mainly explains "JavaScript how to achieve fireworks and Fu word special effects", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "JavaScript how to achieve fireworks and Fu word special effects" bar!

Superpower one: set off fireworks

First, let's take a look at the super cool 3D fireworks effect.

How's it going? is it a sudden surge? Don't say much and get to work:

Create a text document on your computer, copy the following code, then change the text extension to html, and the text document will become a web page. Just click run.

The code is as follows:

Fireworks animation special effects html,body {margin:0px; width:100%; height:100%; overflow:hidden; background:#000;} # canvas {width:100%; height:100%;} 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] .trail.splice (0Pol 1). Sparks [I]. Xtrees = sparks [I] .vx; sparks [I]. Ytrees = sparks.vy; sparks.zags = sparks.vz; sparks.vx / = 1.075; sparks.vy / = 1.075 Sparks [I] .vz / = 1.075;} else {sparks.splice (iL1);}} p=Math.atan2 (playerX,playerZ); d=Math.sqrt (playerX*playerX+playerZ*playerZ); d+=Math.sin (frames/80) / 1.25; t=Math.sin (frames/200) / 40 PlayerX=Math.sin (col) * d; playerZ=Math.cos (pact) * d; yaw=pi+p+t;} function rgb (col) {var r = parseInt ((.5 + Math.sin (col) * .5) * 16); var g = parseInt ((.5 + Math.cos (col) * .5) * 16); var b = parseInt ((.5-Math.sin (col) * .5) * 16) Return "#" + r.toString (16) + g.toString (16) + b.toString (16);} function draw () {ctx.clearRect