纯js代码，制作炫酷烟花特效。快给你的朋友瞧瞧吧！

  首先我们来看看烟花最终实现的效果

是不是很有意思呢，接下来就来讲解实现烟花特效所需的步骤：

实现步骤：

首先我们将html与body填满整个屏幕

<style>
        html,body{
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100%;
            }
    </style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

1.创建一个画布,设置宽高，并将画布添加到body中，调用getContext方法：

	var canvas = document.createElement("canvas");
	document.body.appendChild(canvas);
	var context = canvas.getContext('2d');
    //规定画布大小
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;

• 1
• 2
• 3
• 4
• 5
• 6

2.创建一个方法，用于将画布填充成黑色

function clearCanvas() {
		context.fillStyle = '#000000';
		context.fillRect(0, 0, canvas.width, canvas.height);
	}
	clearCanvas();

• 1
• 2
• 3
• 4
• 5

3.创建烟火，里面有各种属性（速度，角度，大小，半径等）

var particles = [];//烟火
function createFireworks(sx, sy) {
		var count = 100;//烟火的个数
		for (var i = 0; i < count; i++) {
			var p = {};//烟火对象
			var angle = Math.floor(Math.random() * 360);//角度
			p.radians = angle * Math.PI / 180;//弧度
			p.x = sx;
			p.y = sy;
			p.speed = Math.random() * 5 ;//速度
			p.radius = p.speed;//半径
			p.size = Math.ceil(Math.random() *4) ;//大小
            p.hue=Math.floor(Math.random() * 100) + 150;//颜色
			p.brightness = Math.floor(Math.random() * 31) + 50;//亮度
			p.alpha = (Math.floor(Math.random() * 61) + 40) / 100;//透明度
			particles.push(p);
		}
	}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

'

运行

运行

4.创建一个画烟花的方法，用于实现烟花的效果

function drawFireworks() {
		clearCanvas();
		for (var i = 0; i < particles.length; i++) {
			var p = particles[i];
			var vx = Math.cos(p.radians) * p.radius;//小球水平方向落下时的距离
			var vy = Math.sin(p.radians) * p.radius + 0.4;//小球落下时的距离

			p.x += vx;
			p.y += vy;
			p.radius *= 1 - p.speed / 100;//半径
			p.alpha -= 0.005;//透明度
			if (p.alpha <= 0) {
				particles.splice(i, 1);
				continue;
			}
			context.beginPath();
            // 中心坐标 半径  角度
			context.arc(p.x, p.y, p.size, 0, Math.PI * 2);
			// ()
            // 颜色 饱和度 亮度  透明度
			context.fillStyle = 'hsla(' + p.hue + ', 100%,' + p.brightness + '%, ' + p.alpha + ')';
			context.fill();
		}
	}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24

'

运行

运行

5.创建一个实现烟花烟雾拖尾的效果：

function tick() {
		context.globalCompositeOperation = 'destination-out';
		context.fillStyle = 'rgba(0,0,0,' + 0.1 + ')';
		context.fillRect(0, 0, canvas.width, canvas.height);
		context.globalCompositeOperation = 'lighter';
		drawFireworks();//画烟火
        //浏览器下次重绘之前继续更新下一帧动画
		requestAnimationFrame(tick);
	}
	tick();

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

6.使用一个循环定时器，在屏幕上自动绽放烟花,这时烟花已经可以自动绽放

setInterval(function () {//当前视口随机创建烟花
	createFireworks(Math.random() * canvas.width, Math.random()
		* canvas.height);
}, 1000);

• 1
• 2
• 3
• 4

效果如下：

7.这里我们再添加一个鼠标点击事件，可以使用鼠标控制烟花在指定位置绽放：（这一步可以不写）

document.onmousedown=function(e){
        var x = e.clientX; //距离当前视口的横纵坐标
		var y = e.clientY;
		createFireworks(x, y);//创建烟花
    }

• 1
• 2
• 3
• 4
• 5

最后我们看看鼠标点击产生烟花的效果

将1-7步依次放入script标签中即可实现烟花效果

你学会了吗？