Shulou(Shulou.com)06/03 Report--

This article to share with you is about how to use JavaScript to make your web page fireworks, Xiaobian feel very practical, so share with you to learn, I hope you can read this article after some harvest, not much to say, follow Xiaobian to see it.

The Spring Festival is coming soon, and fireworks are still not allowed in big cities. I miss the happy time when I was a child and put flowers in my yard. Children in big cities can't experience this kind of happiness. But as front-end engineers, this is not difficult for us, the following will teach you how to use JS in the web page fireworks.

A search for "fireworks" in codepen will find all kinds of fireworks effects done with JS. The code I share today is also a reference from one of them.

After I modified this code, it has been implanted into the tadpole pond of "I love nuggets." As long as you send "Happy New Year" and "Happy Spring Festival," you can set off fireworks in the pond.

After reading this article, you can write fireworks on any platform and in any language.

How did it happen?

First, create a Canvas.

First create a canvas of the same size as the viewable area of the web page, and change the canvas size by listening for the resize event of 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(0,0,canvas.width, canvas.height); } window.addEventListener('resize', resizeCanvas, false); resizeCanvas();

Practice before fireworks

Fireworks explode from a single point and spread out in different arcs, so let's start by drawing a few dots around a center. It's kind of like a loading loop. This is the first time I've ever seen a woman.

function mouseDownHandler(e) { var x = e.clientX; var y = e.clientY; drawFireworks(x,y); } function drawFireworks(sx,sy) { var count = 10;//Number of fireworks particles var radius = 10;//firework radius for(var i = 0 ;i

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.