JavaScript实现带音效的烟花特效

花了半个小时写的代码，这个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 };});// initctx.fillstyle = '#000003';ctx.fillrect(0, 0, canvas.width, canvas.height);// objectsvar 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 suppri = fal;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: fal,alpha: 1,far: math.random() * range + (center.y - range)};fire.ba = {x: fire.x,y: fire.y,vx: fire.vx,vy: fire.vy};//listfire.push(fire);// play soundplaylaunchsound();}// define array of soundvar listexpsound = $('audio.exp');var listlaunchsound = $('audio.launch');// define array position of textvar 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() * 英语4级单词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.ba = {life: text.life,size: text.size,};text.direct = (text.left - text.x) * 0.08;listtext.push(text);}// play soundplayexpsound();//lights.push({ x: center.x + left * 0.9, y: center.y + top, color: text.fill, radius: range * 2 });if (++textindex < textstring.length) {ttimeout(inittext, 10);}el {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 soundplaylaunchsound();}}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() {ttimeout(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.ba = {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.ba = {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.ba = {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.ba = {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.ba = {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 ellipvar 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 ellipvy: cx * math.sin(rotate) + cy * math.cos(rotate), // rotate y ellipay: 0.02,alpha: 1,life: math.round(math.random() * range / 2) + range / 1.5};firework.ba = {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.ba = {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.ba = {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.ba = {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.ba = {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.ba = {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;}el 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);}el if (rad - rotate > math.pi && rad - rotate < math.pi * 1.5) {p = (rad - rotate - math.pi) / (math.pi * 0.5);v = velocity * (1 - p);}el 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;}el {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.ba = {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.ba = {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,fil2012考研英语l: 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.ba = {life: spark.life,velocity: velocity};listspark.push(spark);}return color;}function chainspark(parentspark) {var color = parentspark.fill;if (parentspark.chain > 0) {var velocity = parentspark.ba.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.ba.life * 0.8};spark.ba = {life: spark.life,size: spark.size,velocity: velocity};listspark.push(spark);}if (math.random() > 0.9 && parentspark.chain > 1) {// play soundplayexpsound();}}return color;}(function loop() {requestanimationframe(loop);update();draw();})();function update() {// update fire logicfor (var i = 0; i < listfire.length; i++) {var fire = listfire[i];//if (fire.y <= fire.far) {// play soundplayexpsound();// ca add fireworkfired++;var color = actions[math.floor(math.random() * actions.length)](fire);// lightlights.push({ x: fire.x, y: fire.y, color: color, radius: range * 2 });// retfire.y = fire.ba.y;fire.x = fire.ba.x;// specialif (fired % 33 == 0) {initspark();}// on holdsuppri = fired % 100 == 0 ? true : suppri;if (suppri) {fire.vx = 0;fire.vy = 0;fire.ax = 0;fire.hold = true;onhold++;}el {fire.vx = fire.ba.vx;fire.vy = fire.ba.vy;fire.ax = math.random() * 0.06 - 0.03;// play soundplaylaunchsound();}}//if (fire.hold && fire.delay <= 0) {onhold--;fire.hold = fal;fire.delay = math.round(math.random() * range) + range * 4;fire.vx = fire.ba.vx;fire.vy = fire.ba.vy;fire.ax = math.random() * 0.06 - 0.03;fire.alpha = 1;// play soundplaylaunchsound();}el if (fire.hold && fire.delay > 0) {fire.delay--;}el {fire.x += fire.vx;fire.y += fire.vy;fire.vx += fire.ax;fire.alpha = (fire.y - fire.far) / fire.far;}}// update firework logicfor (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.ba.life;firework.size = firework.alpha * firework.ba.size;firework.alpha = firework.alpha > 0.6 ? 1 : firework.alpha;//firework.life--;if (firework.life <= 0) {listfirework.splice(i, 1);}}}// suppri happy new year!if (suppri && onhold == 10) {suppri = fal;ttimeout(inittext, 3000);}// update text logicfor (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.ba.life;text.size = text.alpha * text.ba.size;text.alpha = text.alpha > 0.6 ? 1 : text.alpha;//text.life--;if (text.life <= 0) {listtext.splice(i, 1);}}// update special logicfor (var i = listspecial.length - 1; i >= 0; i--) {var special = listspecial[i];if (special.y <= special.far) {// play soundplayexpsound();// lightlights.push({ x: special.x, y: special.y, color: special.fill, alpha: 0.02, radius: range * 2 });//makespark(special);// remove from listlistspecial.splice(i, 1);}el {special.x += special.vx;special.y += special.vy;special.vx += special.ax;special.alpha = (special.y - special.far) / special.far;}}// update spark logicfor (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.ba.life + 0.2;//spark.life--;if (spark.life < spark.ba.life * 0.8 && spark.life > 0) {//spark.chain--;chainspark(spark);}if (spark.life <= 0) {listspark.splice(i, 1);}}}}function draw() {// clearctx.globalcompositeoperation = 'source-over';ctx.globalalpha = 0.2;ctx.fillstyle = '#000003';ctx.fillrect(0, 0, canvas.width, canvas.height);// re-drawctx.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.clopath();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.clopath();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.clopath();// 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.clopath();// ctx.fill();ctx.fillstyle = spark.fill;ctx.fillrect(spark.x - spark.size, spark.y - spark.size, spark.size * 2, spark.size *2);}// light effectwhile (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);}// suppri: 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 chart="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" c汉城湖畔ontrols></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&g百善孝为先作文t;</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烟花特效的资料请关注www.887551.com其它相关文章！