花了半个小时写的代码，这个html5 canvas新年烟花一定不会让大家失望！
首先我们看下静态的效果图：
文章末尾有动态的效果图，滑动即可看到！
javascript代码如下：
$(function() {
var canvas = $('#canvas')[0];
canvas.width = $(window).width();
canvas.height = $(window).height();
var ctx = canvas.getcontext('2d');
// resize
$(window).on('resize', function() {
canvas.width = $(window).width();
canvas.height = $(window).height();
ctx.fillstyle = '#000003';
ctx.fillrect(0, 0, canvas.width, canvas.height);
center = { x: canvas.width / 2, y: canvas.height / 2 };
});
// init
ctx.fillstyle = '#000003';
ctx.fillrect(0, 0, canvas.width, canvas.height);
// objects
var listfire = [];
var listfirework = [];
var listtext = [];
var listspecial = [];
var listspark = [];
var lights = [];
var firenumber = 10;
var center = { x: canvas.width / 2, y: canvas.height / 2 };
var range = 100;
var fired = 0;
var onhold = 0;
var supprise = false;
var textindex = 0;
var actions = [makedoublefullcirclefirework, makeplanetcirclefirework, makefullcirclefirework, makedoublecirclefirework, makeheartfirework, makecirclefirework, makerandomfirework];
for (var i = 0; i < firenumber; i++) {
var fire = {
x: math.random() * range / 2 - range / 4 + center.x,
y: math.random() * range * 2.5 + canvas.height,
size: math.random() + 0.5,
fill: '#ff3',
vx: math.random() - 0.5,
vy: -(math.random() + 4),
ax: math.random() * 0.06 - 0.03,
delay: math.round(math.random() * range) + range * 4,
hold: false,
alpha: 1,
far: math.random() * range + (center.y - range)
};
fire.base = {
x: fire.x,
y: fire.y,
vx: fire.vx,
vy: fire.vy
};
//
listfire.push(fire);
// play sound
playlaunchsound();
}
// define array of sound
var listexpsound = $('audio.exp');
var listlaunchsound = $('audio.launch');
// define array position of text
var textstring = 'happylunarnewyear2018';
var textmatrix = [
4.5, 0, 5.5, 0, 6.5, 0, 7.5, 0, 8.5, 0,
0, 1, 1, 1, 2, 1, 3, 1, 4, 1, 6, 1, 7, 1, 8, 1, 10, 1, 11, 1, 12, 1, 13, 1,
5, 2, 6, 2, 7, 2, 8, 2
]
var chars = {
h: [
0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
1, 3, 2, 3, 3, 3, 4, 3,
5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6, 5, 7
],
a: [
2, 0, 2, 1, 2, 2, 1, 2, 1, 3, 1, 4, 1, 5, 0, 5, 0, 6, 0, 7, 2, 5,
3, 0, 3, 1, 3, 2, 4, 2, 4, 3, 4, 4, 4, 1, 5, 5, 5, 6, 5, 7, 3, 5
],
p: [
0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
1, 0, 2, 0, 3, 0, 4, 1, 5, 2, 4, 3, 3, 4, 2, 4, 1, 4
],
y: [
0, 0, 0, 1, 1, 1, 1, 2, 1, 3, 2, 3, 2, 4, 2, 5, 2, 6, 2, 7,
3, 2, 3, 3, 4, 1, 4, 2, 5, 0, 5, 1
],
l: [
0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
1, 7, 2, 7, 3, 7, 4, 7, 5, 7
],
u: [
0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6,
1, 7, 2, 7, 3, 7, 4, 7,
5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6
],
n: [
0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
1, 1, 1, 2, 2, 2, 2, 3, 2, 4, 3, 4, 3, 5, 4, 5, 4, 6,
5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6, 5, 7
],
e: [
0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
1, 0, 2, 0, 3, 0, 4, 0, 5, 0,
1, 3, 2, 3, 3, 3, 4, 3,
1, 7, 2, 7, 3, 7, 4, 7, 5, 7
],
w: [
0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 1, 6,
2, 1, 2, 2, 2, 3, 2, 4, 2, 5, 2, 6, 2, 7, 3, 7,
5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 4, 5, 4, 6
],
r: [
0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
1, 0, 2, 0, 3, 0, 4, 1, 5, 2, 4, 3, 3, 4, 2, 4, 1, 4,
1, 5, 2, 5, 3, 6, 4, 6, 5, 7
],
2: [
0, 1, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 5, 1, 5, 2, 5, 3,
4, 3, 3, 3, 2, 3, 2, 4, 1, 4, 1, 5,
0, 5, 0, 6, 0, 7, 1, 7, 2, 7, 3, 7, 4, 7, 5, 7, 5, 6
],
0: [
0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6,
1, 0, 2, 0, 3, 0, 4, 0,
1, 7, 2, 7, 3, 7, 4, 7,
5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6
],
1: [
1, 2, 2, 2, 2, 1, 3, 1, 3, 0,
4, 0, 4, 1, 4, 2, 4, 3, 4, 4, 4, 5, 4, 6, 4, 7,
1, 7, 2, 7, 3, 7, 5, 7
],
7: [
0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0,
5, 1, 5, 2, 5, 3, 4, 3, 4, 4,
3, 4, 3, 5, 3, 6, 3, 7
]
}
function inittext() {
var i = textindex;
var velocity = math.random() * 0.25 + 1;
var shift = { x: -(math.random() + 2), y: -(math.random() + 3) };
var char = chars[textstring[i]];
var width = 80;
var half = 6.5 * width;
var left = textmatrix[i * 2] * width - half;
var top = textmatrix[i * 2 + 1] * range * 1.2 - range * 2.4;
for (var j = 0; j < firenumber * char.length * 0.25; j++) {
var rand = math.floor(math.random() * char.length * 0.5);
var x = char[rand * 2] + shift.x;
var y = char[rand * 2 + 1] + shift.y;
var text = {
x: center.x + left * 0.9,
y: center.y + top,
left: center.x + left,
size: math.random() + 0.5,
fill: '#ff3',
vx: x * (velocity + (math.random() - 0.5) * 0.5),
vy: y * (velocity + (math.random() - 0.5) * 0.5),
ay: 0.08,
alpha: 1,
life: math.round(math.random() * range / 2) + range / 1.5
}
text.base = {
life: text.life,
size: text.size,
};
text.direct = (text.left - text.x) * 0.08;
listtext.push(text);
}
// play sound
playexpsound();
//
lights.push({ x: center.x + left * 0.9, y: center.y + top, color: text.fill, radius: range * 2 });
if (++textindex < textstring.length) {
settimeout(inittext, 10);
}
else {
textindex = 0;
}
}
function initspark() {
var x = math.random() * range * 3 - range * 1.5 + center.x;
var vx = math.random() - 0.5;
var vy = -(math.random() + 4);
var ax = math.random() * 0.04 - 0.02;
var far = math.random() * range * 4 - range + center.y;
var direct = ax * 10 * math.pi;
var max = firenumber * 0.5;
for (var i = 0; i < max; i++) {
var special = {
x: x,
y: math.random() * range * 0.25 + canvas.height,
size: math.random() + 2,
fill: '#ff3',
vx: vx,
vy: vy,
ax: ax,
direct: direct,
alpha: 1
};
special.far = far - (special.y - canvas.height);
listspecial.push(special);
// play sound
playlaunchsound();
}
}
function randcolor() {
var r = math.floor(math.random() * 256);
var g = math.floor(math.random() * 256);
var b = math.floor(math.random() * 256);
var color = 'rgb($r, $g, $b)';
color = color.replace('$r', r);
color = color.replace('$g', g);
color = color.replace('$b', b);
return color;
}
function playexpsound() {
var sound = listexpsound[math.floor(math.random() * listexpsound.length)];
sound.volume = math.random() * 0.4 + 0.1;
sound.play();
}
function playlaunchsound() {
settimeout(function() {
var sound = listlaunchsound[math.floor(math.random() * listlaunchsound.length)];
sound.volume = 0.05;
sound.play();
}, 200);
}
function makecirclefirework(fire) {
var color = randcolor();
var velocity = math.random() * 2 + 6;
var max = firenumber * 5;
for (var i = 0; i < max; i++) {
var rad = (i * math.pi * 2) / max;
var firework = {
x: fire.x,
y: fire.y,
size: math.random() + 1.5,
fill: color,
vx: math.cos(rad) * velocity + (math.random() - 0.5) * 0.5,
vy: math.sin(rad) * velocity + (math.random() - 0.5) * 0.5,
ay: 0.04,
alpha: 1,
life: math.round(math.random() * range / 2) + range / 2
};
firework.base = {
life: firework.life,
size: firework.size
};
listfirework.push(firework);
}
return color;
}
function makedoublecirclefirework(fire) {
var color = randcolor();
var velocity = math.random() * 2 + 8;
var max = firenumber * 3;
for (var i = 0; i < max; i++) {
var rad = (i * math.pi * 2) / max;
var firework = {
x: fire.x,
y: fire.y,
size: math.random() + 1.5,
fill: color,
vx: math.cos(rad) * velocity + (math.random() - 0.5) * 0.5,
vy: math.sin(rad) * velocity + (math.random() - 0.5) * 0.5,
ay: 0.04,
alpha: 1,
life: math.round(math.random() * range / 2) + range / 1.5
};
firework.base = {
life: firework.life,
size: firework.size
};
listfirework.push(firework);
}
color = randcolor();
velocity = math.random() * 3 + 4;
for (var i = 0; i < max; i++) {
var rad = (i * math.pi * 2) / max;
var firework = {
x: fire.x,
y: fire.y,
size: math.random() + 1.5,
fill: color,
vx: math.cos(rad) * velocity + (math.random() - 0.5) * 0.5,
vy: math.sin(rad) * velocity + (math.random() - 0.5) * 0.5,
ay: 0.04,
alpha: 1,
life: math.round(math.random() * range / 2) + range / 1.5
};
firework.base = {
life: firework.life,
size: firework.size
};
listfirework.push(firework);
}
return color;
}
function makeplanetcirclefirework(fire) {
var color = '#aa0609';
var velocity = math.random() * 2 + 4;
var max = firenumber * 2;
for (var i = 0; i < max; i++) {
var rad = (i * math.pi * 2) / max;
var firework = {
x: fire.x,
y: fire.y,
size: math.random() + 1.5,
fill: color,
vx: math.cos(rad) * velocity + (math.random() - 0.5) * 0.5,
vy: math.sin(rad) * velocity + (math.random() - 0.5) * 0.5,
ay: 0.04,
alpha: 1,
life: math.round(math.random() * range / 2) + range / 1.5
};
firework.base = {
life: firework.life,
size: firework.size
};
listfirework.push(firework);
}
max = firenumber * 4;
for (var i = 0; i < max; i++) {
var rad = (i * math.pi * 2) / max;
var firework = {
x: fire.x,
y: fire.y,
size: math.random() + 1.5,
fill: color,
vx: math.cos(rad) * velocity * math.random(),
vy: math.sin(rad) * velocity * math.random(),
ay: 0.04,
alpha: 1,
life: math.round(math.random() * range / 2) + range / 1.5
};
firework.base = {
life: firework.life,
size: firework.size
};
listfirework.push(firework);
}
max = firenumber * 3;
color = '#ff9';
var rotate = math.random() * math.pi * 2;
var vx = velocity * (math.random() + 2);
var vy = velocity * 0.6;
for (var i = 0; i < max; i++) {
var rad = (i * math.pi * 2) / max;
// calc x, y for ellipse
var cx = math.cos(rad) * vx + (math.random() - 0.5) * 0.5;
var cy = math.sin(rad) * vy + (math.random() - 0.5) * 0.5;
var firework = {
x: fire.x,
y: fire.y,
size: math.random() + 1.5,
fill: color,
vx: cx * math.cos(rotate) - cy * math.sin(rotate), // rotate x ellipse
vy: cx * math.sin(rotate) + cy * math.cos(rotate), // rotate y ellipse
ay: 0.02,
alpha: 1,
life: math.round(math.random() * range / 2) + range / 1.5
};
firework.base = {
life: firework.life,
size: firework.size
};
listfirework.push(firework);
}
return '#aa0609';
}
function makefullcirclefirework(fire) {
var color = randcolor();
var velocity = math.random() * 8 + 8;
var max = firenumber * 3;
for (var i = 0; i < max; i++) {
var rad = (i * math.pi * 2) / max;
var firework = {
x: fire.x,
y: fire.y,
size: math.random() + 1.5,
fill: color,
vx: math.cos(rad) * velocity + (math.random() - 0.5) * 0.5,
vy: math.sin(rad) * velocity + (math.random() - 0.5) * 0.5,
ay: 0.06,
alpha: 1,
life: math.round(math.random() * range / 2) + range / 1.5
};
firework.base = {
life: firework.life,
size: firework.size
};
listfirework.push(firework);
}
max = firenumber * math.round(math.random() * 4 + 4);
for (var i = 0; i < max; i++) {
var rad = (i * math.pi * 2) / max;
var firework = {
x: fire.x,
y: fire.y,
size: math.random() + 1.5,
fill: color,
vx: math.cos(rad) * velocity * math.random(),
vy: math.sin(rad) * velocity * math.random(),
ay: 0.06,
alpha: 1,
life: math.round(math.random() * range / 2) + range / 1.5
};
firework.base = {
life: firework.life,
size: firework.size
};
listfirework.push(firework);
}
return color;
}
function makedoublefullcirclefirework(fire) {
var color = randcolor();
var velocity = math.random() * 8 + 8;
var max = firenumber * 3;
for (var i = 0; i < max; i++) {
var rad = (i * math.pi * 2) / max;
var firework = {
x: fire.x,
y: fire.y,
size: math.random() + 1.5,
fill: color,
vx: math.cos(rad) * velocity + (math.random() - 0.5) * 0.5,
vy: math.sin(rad) * velocity + (math.random() - 0.5) * 0.5,
ay: 0.04,
alpha: 1,
life: math.round(math.random() * range / 2) + range / 1.5
};
firework.base = {
life: firework.life,
size: firework.size
};
listfirework.push(firework);
}
color = randcolor();
velocity = math.random() * 3 + 4;
max = firenumber * 2;
for (var i = 0; i < max; i++) {
var rad = (i * math.pi * 2) / max;
var firework = {
x: fire.x,
y: fire.y,
size: math.random() + 1.5,
fill: color,
vx: math.cos(rad) * velocity + (math.random() - 0.5) * 0.5,
vy: math.sin(rad) * velocity + (math.random() - 0.5) * 0.5,
ay: 0.06,
alpha: 1,
life: math.round(math.random() * range / 2) + range / 1.5
};
firework.base = {
life: firework.life,
size: firework.size
};
listfirework.push(firework);
}
max = firenumber * 4;
for (var i = 0; i < max; i++) {
var rad = (i * math.pi * 2) / max;
var firework = {
x: fire.x,
y: fire.y,
size: math.random() + 1.5,
fill: color,
vx: math.cos(rad) * velocity * math.random(),
vy: math.sin(rad) * velocity * math.random(),
ay: 0.06,
alpha: 1,
life: math.round(math.random() * range / 2) + range / 1.5
};
firework.base = {
life: firework.life,
size: firework.size
};
listfirework.push(firework);
}
return color;
}
function makeheartfirework(fire) {
var color = randcolor();
var velocity = math.random() * 3 + 3;
var max = firenumber * 5;
var rotate = math.random() * math.pi * 2;
for (var i = 0; i < max; i++) {
var rad = (i * math.pi * 2) / max + rotate;
var v, p;
if (rad - rotate < math.pi * 0.5) {
p = (rad - rotate) / (math.pi * 0.5);
v = velocity + velocity * p;
}
else if (rad - rotate > math.pi * 0.5 && rad - rotate < math.pi) {
p = (rad - rotate - math.pi * 0.5) / (math.pi * 0.5);
v = velocity * (2 - p);
}
else if (rad - rotate > math.pi && rad - rotate < math.pi * 1.5) {
p = (rad - rotate - math.pi) / (math.pi * 0.5);
v = velocity * (1 - p);
}
else if (rad - rotate > math.pi * 1.5 && rad - rotate < math.pi * 2) {
p = (rad - rotate - math.pi * 1.5) / (math.pi * 0.5);
v = velocity * p;
}
else {
v = velocity;
}
v = v + (math.random() - 0.5) * 0.25;
var firework = {
x: fire.x,
y: fire.y,
size: math.random() + 1.5,
fill: color,
vx: math.cos(rad) * v,
vy: math.sin(rad) * v,
ay: 0.02,
alpha: 1,
life: math.round(math.random() * range / 2) + range / 1.5
};
firework.base = {
life: firework.life,
size: firework.size
};
listfirework.push(firework);
}
return color;
}
function makerandomfirework(fire) {
var color = randcolor();
for (var i = 0; i < firenumber * 5; i++) {
var firework = {
x: fire.x,
y: fire.y,
size: math.random() + 1.5,
fill: color,
vx: math.random() * 15 - 7.5,
vy: math.random() * -15 + 5,
ay: 0.05,
alpha: 1,
life: math.round(math.random() * range / 2) + range / 2
};
firework.base = {
life: firework.life,
size: firework.size
};
listfirework.push(firework);
}
return color;
}
function makespark(special) {
var color = special.fill;
var velocity = math.random() * 6 + 12;
var max = firenumber;
for (var i = 0; i < max; i++) {
var rad = (math.random() * math.pi * 0.3 + math.pi * 0.35) + math.pi + special.direct;
var spark = {
x: special.x,
y: special.y,
size: math.random() + 1,
fill: color,
vx: math.cos(rad) * velocity + (math.random() - 0.5) * 0.5,
vy: math.sin(rad) * velocity + (math.random() - 0.5) * 0.5,
ay: 0.02,
alpha: 1,
rad: rad,
direct: special.direct,
chain: math.round(math.random() * 2) + 2,
life: math.round(math.random() * range / 2) + range / 2
};
spark.base = {
life: spark.life,
velocity: velocity
};
listspark.push(spark);
}
return color;
}
function chainspark(parentspark) {
var color = parentspark.fill;
if (parentspark.chain > 0) {
var velocity = parentspark.base.velocity * 0.6;
var max = math.round(math.random() * 5);
for (var i = 0; i < max; i++) {
var rad = (math.random() * math.pi * 0.3 - math.pi * 0.15) + parentspark.rad + parentspark.direct;
var spark = {
x: parentspark.x,
y: parentspark.y,
size: parentspark.size * 0.6,
fill: color,
vx: math.cos(rad) * velocity + (math.random() - 0.5) * 0.5,
vy: math.sin(rad) * velocity + (math.random() - 0.5) * 0.5,
ay: 0.02,
alpha: 1,
rad: rad,
direct: parentspark.direct,
chain: parentspark.chain,
life: parentspark.base.life * 0.8
};
spark.base = {
life: spark.life,
size: spark.size,
velocity: velocity
};
listspark.push(spark);
}
if (math.random() > 0.9 && parentspark.chain > 1) {
// play sound
playexpsound();
}
}
return color;
}
(function loop() {
requestanimationframe(loop);
update();
draw();
})();
function update() {
// update fire logic
for (var i = 0; i < listfire.length; i++) {
var fire = listfire[i];
//
if (fire.y <= fire.far) {
// play sound
playexpsound();
// case add firework
fired++;
var color = actions[math.floor(math.random() * actions.length)](fire);
// light
lights.push({ x: fire.x, y: fire.y, color: color, radius: range * 2 });
// reset
fire.y = fire.base.y;
fire.x = fire.base.x;
// special
if (fired % 33 == 0) {
initspark();
}
// on hold
supprise = fired % 100 == 0 ? true : supprise;
if (supprise) {
fire.vx = 0;
fire.vy = 0;
fire.ax = 0;
fire.hold = true;
onhold++;
}
else {
fire.vx = fire.base.vx;
fire.vy = fire.base.vy;
fire.ax = math.random() * 0.06 - 0.03;
// play sound
playlaunchsound();
}
}
//
if (fire.hold && fire.delay <= 0) {
onhold--;
fire.hold = false;
fire.delay = math.round(math.random() * range) + range * 4;
fire.vx = fire.base.vx;
fire.vy = fire.base.vy;
fire.ax = math.random() * 0.06 - 0.03;
fire.alpha = 1;
// play sound
playlaunchsound();
}
else if (fire.hold && fire.delay > 0) {
fire.delay--;
}
else {
fire.x += fire.vx;
fire.y += fire.vy;
fire.vx += fire.ax;
fire.alpha = (fire.y - fire.far) / fire.far;
}
}
// update firework logic
for (var i = listfirework.length - 1; i >= 0; i--) {
var firework = listfirework[i];
if (firework) {
firework.vx *= 0.9;
firework.vy *= 0.9;
firework.x += firework.vx;
firework.y += firework.vy;
firework.vy += firework.ay;
firework.alpha = firework.life / firework.base.life;
firework.size = firework.alpha * firework.base.size;
firework.alpha = firework.alpha > 0.6 ? 1 : firework.alpha;
//
firework.life--;
if (firework.life <= 0) {
listfirework.splice(i, 1);
}
}
}
// supprise happy new year!
if (supprise && onhold == 10) {
supprise = false;
settimeout(inittext, 3000);
}
// update text logic
for (var i = listtext.length - 1; i >= 0; i--) {
var text = listtext[i];
text.vx *= 0.9;
text.vy *= 0.9;
text.direct *= 0.9;
text.x += text.vx + text.direct;
text.y += text.vy;
text.vy += text.ay;
text.alpha = text.life / text.base.life;
text.size = text.alpha * text.base.size;
text.alpha = text.alpha > 0.6 ? 1 : text.alpha;
//
text.life--;
if (text.life <= 0) {
listtext.splice(i, 1);
}
}
// update special logic
for (var i = listspecial.length - 1; i >= 0; i--) {
var special = listspecial[i];
if (special.y <= special.far) {
// play sound
playexpsound();
// light
lights.push({ x: special.x, y: special.y, color: special.fill, alpha: 0.02, radius: range * 2 });
//
makespark(special);
// remove from list
listspecial.splice(i, 1);
}
else {
special.x += special.vx;
special.y += special.vy;
special.vx += special.ax;
special.alpha = (special.y - special.far) / special.far;
}
}
// update spark logic
for (var i = listspark.length - 1; i >= 0; i--) {
var spark = listspark[i];
if (spark) {
spark.vx *= 0.9;
spark.vy *= 0.9;
spark.x += spark.vx;
spark.y += spark.vy;
spark.vy += spark.ay;
spark.alpha = spark.life / spark.base.life + 0.2;
//
spark.life--;
if (spark.life < spark.base.life * 0.8 && spark.life > 0) {
//
spark.chain--;
chainspark(spark);
}
if (spark.life <= 0) {
listspark.splice(i, 1);
}
}
}
}
function draw() {
// clear
ctx.globalcompositeoperation = 'source-over';
ctx.globalalpha = 0.2;
ctx.fillstyle = '#000003';
ctx.fillrect(0, 0, canvas.width, canvas.height);
// re-draw
ctx.globalcompositeoperation = 'screen';
for (var i = 0; i < listfire.length; i++) {
var fire = listfire[i];
ctx.globalalpha = fire.alpha;
ctx.beginpath();
ctx.arc(fire.x, fire.y, fire.size, 0, math.pi * 2);
ctx.closepath();
ctx.fillstyle = fire.fill;
ctx.fill();
}
for (var i = 0; i < listfirework.length; i++) {
var firework = listfirework[i];
ctx.globalalpha = firework.alpha;
ctx.beginpath();
ctx.arc(firework.x, firework.y, firework.size, 0, math.pi * 2);
ctx.closepath();
ctx.fillstyle = firework.fill;
ctx.fill();
}
for (var i = 0; i < listspecial.length; i++) {
var special = listspecial[i];
ctx.globalalpha = special.alpha;
// ctx.beginpath();
// ctx.arc(special.x, special.y, special.size, 0, math.pi * 2);
// ctx.closepath();
// ctx.fill();
ctx.fillstyle = special.fill;
ctx.fillrect(special.x - special.size, special.y - special.size, special.size * 2, special.size *2);
}
for (var i = 0; i < listspark.length; i++) {
var spark = listspark[i];
ctx.globalalpha = spark.alpha;
// ctx.beginpath();
// ctx.arc(spark.x, spark.y, spark.size, 0, math.pi * 2);
// ctx.closepath();
// ctx.fill();
ctx.fillstyle = spark.fill;
ctx.fillrect(spark.x - spark.size, spark.y - spark.size, spark.size * 2, spark.size *2);
}
// light effect
while (lights.length) {
var light = lights.pop();
var gradient = ctx.createradialgradient(light.x, light.y, 0, light.x, light.y, light.radius);
gradient.addcolorstop(0, '#fff');
gradient.addcolorstop(0.2, light.color);
gradient.addcolorstop(0.8, 'rgba(0, 0, 0, 0)');
gradient.addcolorstop(1, 'rgba(0, 0, 0, 0)');
ctx.globalalpha = light.alpha ? light.alpha : 0.25;
ctx.fillstyle = gradient;
ctx.fillrect(light.x - light.radius, light.y - light.radius, light.radius * 2, light.radius * 2);
}
// supprise: happy lunar new year 2018!
for (var i = 0; i < listtext.length; i++) {
var text = listtext[i];
ctx.globalalpha = text.alpha;
ctx.fillstyle = text.fill;
ctx.fillrect(text.x - text.size, text.y - text.size, text.size * 2, text.size * 2);
}
}
})
index首页代码如下：
<!doctype html> <html lang="en" > <head> <meta charset="utf-8"> <title>新年快乐</title> <link rel="stylesheet" href="css/style.css" rel="external nofollow" > </head> <body> <canvas id="canvas"></canvas> <div class="block-audio"> <audio class="exp" src="m/exp1.mp3" controls></audio> <audio class="exp" src="m/exp1.mp3" controls></audio> <audio class="exp" src="m/exp1.mp3" controls></audio> <audio class="exp" src="m/exp2.mp3" controls></audio> <audio class="exp" src="m/exp2.mp3" controls></audio> <audio class="exp" src="m/exp2.mp3" controls></audio> <audio class="exp" src="m/exp3.mp3" controls></audio> <audio class="exp" src="m/exp3.mp3" controls></audio> <audio class="exp" src="m/exp3.mp3" controls></audio> <audio class="exp" src="m/exp4.mp3" controls></audio> <audio class="exp" src="m/exp4.mp3" controls></audio> <audio class="exp" src="m/exp4.mp3" controls></audio> <audio class="exp" src="m/exp5.mp3" controls></audio> <audio class="exp" src="m/exp5.mp3" controls></audio> <audio class="exp" src="m/exp5.mp3" controls></audio> <audio class="exp" src="m/exp6.mp3" controls></audio> <audio class="exp" src="m/exp6.mp3" controls></audio> <audio class="exp" src="m/exp6.mp3" controls></audio> <audio class="exp" src="m/exp7.mp3" controls></audio> <audio class="exp" src="m/exp7.mp3" controls></audio> <audio class="exp" src="m/exp7.mp3" controls></audio> <audio class="exp" src="m/exp8.mp3" controls></audio> <audio class="exp" src="m/exp8.mp3" controls></audio> <audio class="exp" src="m/exp8.mp3" controls></audio> <audio class="launch" src="m/launch1.mp3" controls></audio> <audio class="launch" src="m/launch1.mp3" controls></audio> <audio class="launch" src="m/launch2.mp3" controls></audio> <audio class="launch" src="m/launch2.mp3" controls></audio> <audio class="launch" src="m/launch3.mp3" controls></audio> <audio class="launch" src="m/launch3.mp3" controls></audio> <audio class="launch" src="m/launch4.mp3" controls></audio> <audio class="launch" src="m/launch4.mp3" controls></audio> <audio class="launch" src="m/launch5.mp3" controls></audio> <audio class="launch" src="m/launch5.mp3" controls></audio> </div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>
css代码如下：
canvas {
display: block;
}
.block-audio {
display: none;
}
body{padding: 0px;margin: 0px}
最后运行烟花特效动态图如下：
以上就是javascript实现带音效的烟花特效的详细内容，更多关于javascript烟花特效的资料请关注其它相关文章！
