但真实的烟花肯定不会这么听话，规规矩矩的保持弧度和速度，所以我们要加入一些随机因子。
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.radius = 0; 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]; p.vx = p.sx+Math.cos(p.radians) * p.radius; p.vy = p.sy+Math.sin(p.radians) * p.radius; p.radius += 1+p.speed; 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; 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;
现在这个烟花看起来是不是就很有烟花的感觉了，当然各种参数你还可以更细致的加入一些变量。比如绘制一个炮竹，从炮竹处向天空发射。最后才是烟花…这些就交给大家自己去实现吧。
在任意网页上放烟花
在Chrome里新建一个书签，复制以下代码，粘贴到网址一栏，然后保存。
https://www.bilibili.com/video/bv1fr4y1T7TB
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); })();
源码下载
https://download.csdn.net/download/qq_44273429/14218941
