How to use JS to set off fireworks on a web page

This article mainly explains "how to use JS to let the web page set off fireworks", 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 "how to use JS to let web pages set off fireworks" bar!

Search codepen for "fireworks" and you can find a variety of fireworks using JS. The code I share today is also a reference from one of them.

After reading this article, make sure that you can write the effect of setting off fireworks on any platform and in any language.

How did it happen?

Create a Canvas first

First create a canvas that is the same size as the visual area of the web page, and change the size of the canvas by listening for resize events in the display area.

Var canvas = document.getElementById ('myCanvas'); var context = canvas.getContext (' 2d'); function resizeCanvas () {canvas.width = window.innerWidth; canvas.height = window.innerHeight;} function clearCanvas () {context.fillStyle ='# ffffff'; context.fillRect;} window.addEventListener ('resize', resizeCanvas, false); resizeCanvas ()

Practice before setting off fireworks

Fireworks explode from one point and spread out in different radians, so we first draw a few small dots around the center of a circle. It's kind of like loading's little circle. This is actually the initial state of the fireworks.

Function mouseDownHandler (e) {var x = e.clientX; var y = e.clientY; drawFireworks (XMague y);} function drawFireworks (sx,sy) {var count = 10 var X / number of fireworks particles var radius = 10 x X X / fireworks radius for (var I = 0; I)