# 快过年了，用JS让你的网页放🎆烟花吧

40,156 阅读4分钟

codepen 里搜索 “fireworks” 可以搜到各种使用JS完成的烟花效果。我今天分享的代码，也是参考自其中一个。

# 如何实现的？

## 先创建一个Canvas

``````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);
}

resizeCanvas();
``````

## 放烟花之前的练习

``````function mouseDownHandler(e) {
var x = e.clientX;
var y = e.clientY;

drawFireworks(x,y);
}

function drawFireworks(sx,sy) {
var count = 10;//烟花粒子数量

for(var i = 0 ;i<count;i++){
var angle = 360/count*i;//烟花粒子角度
var radians = angle * Math.PI / 180;//烟花粒子弧度

var size = 2;
context.beginPath();
context.arc(vx, vy, size, 0, Math.PI*2, false)
context.closePath();
context.fillStyle = "#ff0000";
context.fill();
}
}

``````

## 动起来

1. setInterval

``````var radius = 0;//圆心半径
function fire(x,y){
function tick() {
drawFireworks(x,y);//绘制烟花
}
setInterval(tick,30);//每30毫秒绘制一次
}
``````
1. requestAnimationFrame

``````var radius = 0;
function fire(x,y){
function tick() {
drawFireworks(x,y);
requestAnimationFrame(tick);
}
tick();
}
``````

## 更像烟花一点

``````var rid;
function fire(x,y){
createFireworks(x,y);

function tick() {
drawFireworks();
rid=requestAnimationFrame(tick);
}
cancelAnimationFrame(rid);
tick();
}

var particles=[];
function createFireworks(sx,sy){
particles=[];

var hue = Math.floor(Math.random()*51)+150;
var hueVariance = 30;
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.sx = sx;
p.sy = sy;

p.speed = (Math.random()*5)+.4;

p.size = Math.floor(Math.random()*3)+1;

p.hue = Math.floor(Math.random()*((hue+hueVariance)-(hue-hueVariance)))+(hue-hueVariance);
p.brightness = Math.floor(Math.random()*31)+50;
p.alpha = (Math.floor(Math.random()*61)+40)/100;

particles.push(p);
}
}

function drawFireworks() {
clearCanvas();

for(var i = 0 ;i<particles.length;i++){
var p = particles[i];

context.beginPath();
context.arc(p.vx, p.vy, p.size, 0, Math.PI*2, false);
context.closePath();

context.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+100+')';
context.fill();
}
}
``````

``````function tick() {
//tips:注意新加入的这4行代码
context.globalCompositeOperation = 'destination-out';
context.fillStyle = 'rgba(0,0,0,'+10/100+')';
context.fillRect(0,0,canvas.width,canvas.height);
context.globalCompositeOperation = 'lighter';
//tipsend
drawFireworks();
rid=requestAnimationFrame(tick);
}
``````

``````var vx = Math.cos(p.radians) * p.radius;

p.x += vx;
p.y += vy;

p.alpha -= 0.005;
``````

## 在任意网页上放烟花

``````javascript:!(function() {var cdom = document.createElement("canvas");cdom.id = "myCanvas";cdom.style.position="fixed";cdom.style.left = "0";cdom.style.top = "0";cdom.style.zIndex=-1;document.body.appendChild(cdom);var canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d');function resizeCanvas() {canvas.width = window.innerWidth;canvas.height = window.innerHeight;}window.addEventListener('resize', resizeCanvas, false);resizeCanvas();clearCanvas();function clearCanvas(){context.fillStyle = '#000000';context.fillRect(0,0,canvas.width, canvas.height);}function mouseDownHandler(e) {var x = e.clientX;var y = e.clientY;fire(x,y);}var rid;function fire(x,y){createFireworks(x,y);function tick() {context.globalCompositeOperation = 'destination-out';    context.fillStyle = 'rgba(0,0,0,'+10/100+')';    context.fillRect(0,0,canvas.width,canvas.height);    context.globalCompositeOperation = 'lighter';drawFireworks();rid=requestAnimationFrame(tick);}cancelAnimationFrame(rid);tick();}var particles=[];function createFireworks(sx,sy){particles=[];var hue = Math.floor(Math.random()*51)+150;var hueVariance = 30;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)+.4;p.radius = p.speed;p.size = Math.floor(Math.random()*3)+1;p.hue = Math.floor(Math.random()*((hue+hueVariance)-(hue-hueVariance)))+(hue-hueVariance);p.brightness = Math.floor(Math.random()*31)+50;p.alpha = (Math.floor(Math.random()*61)+40)/100;particles.push(p);}}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;context.beginPath();context.arc(p.x, p.y, p.size, 0, Math.PI*2, false);context.closePath();context.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+p.alpha+')';context.fill();}}document.addEventListener('mousedown', mouseDownHandler, false);})();
``````