首先看一下效果
https://www.bilibili.com/video/bv1fr4y1T7TB
马上就要过春节了，大城市里依然是不准燃放烟花这种空气污染的东西的，想念小时候在自家院子里放花的快乐时光，大城市里的小朋友们是体会不到这种快乐了。但作为前端工程师，这难不倒我们，下面就教大家如何用JS在网页里放烟花。
在 codepen 里搜索 “fireworks” 可以搜到各种使用JS完成的烟花效果。我今天分享的代码，也是参考自其中一个。这篇文章看完，保证你在任何平台，用任何语言都可以写出来放烟花的效果。
如何实现的？
先创建一个Canvas
先新建一个和网页可视区大小一样的canvas，并且通过监听显示区的resize事件，来改变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); } window.addEventListener('resize', resizeCanvas, false); resizeCanvas();
放烟花之前的练习
function mouseDownHandler(e) { var x = e.clientX; var y = e.clientY; drawFireworks(x,y); } function drawFireworks(sx,sy) { var count = 10;//烟花粒子数量 var radius = 10;//烟花环绕半径 for(var i = 0 ;i<count;i++){ var angle = 360/count*i;//烟花粒子角度 var radians = angle * Math.PI / 180;//烟花粒子弧度 var vx = sx+Math.cos(radians) * radius; var vy = sy+Math.sin(radians) * radius; var size = 2; context.beginPath(); context.arc(vx, vy, size, 0, Math.PI*2, false) context.closePath(); context.fillStyle = "#ff0000"; context.fill(); } } document.addEventListener('mousedown', mouseDownHandler, false);
以上代码的含义大家应该都懂对不对？但现在没有动画，一点也不像烟花。别着急，我们马上就让它们动起来。
动起来
动起来其实就是不断的去绘制一个值从小变大的圆心半径…能明白吧，不断的绘制有两种方法，setInterval和requestAnimationFrame，两种方法都可以。
1.setInterval
优点：可以比较容易的设定动画的绘制频率。
var radius = 0;//圆心半径 function fire(x,y){ function tick() { drawFireworks(x,y);//绘制烟花 radius++;//半径不断变大 } setInterval(tick,30);//每30毫秒绘制一次 }
2.requestAnimationFrame
优点：绘制频率跟浏览器画面的绘制同步。
var radius = 0; function fire(x,y){ function tick() { drawFireworks(x,y); radius++; requestAnimationFrame(tick); } tick(); }
