JavaScript实现带音效的烟花特效
程序员文章站
2022-06-19 16:30:07
花了半个小时写的代码,这个html5 canvas新年烟花一定不会让大家失望!首先我们看下静态的效果图:文章末尾有动态的效果图,滑动即可看到! javascript代码如下:$(function()...
花了半个小时写的代码,这个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烟花特效的资料请关注其它相关文章!