快过年了，大城市还是不准放烟花污染空气，好怀念小时候在自家院子里放花的快乐小时候，大城市的孩子已经体会不到这种幸福了。但是作为前端工程师，这对我们来说不是问题。下面教大家如何用JS在网页中燃放烟花。在codepen中搜索“fireworks”可以找到各种用JS做的烟花效果。我今天分享的代码也是基于其中一个。这段代码是我修改过的，已经植入《我爱掘金》的蝌蚪池。就送“新年快乐”、“新春快乐”到池塘里放烟花吧。看完这篇文章，保证你可以在任何平台，任何语言写出燃放烟花的效果。如何实现？首先创建一个Canvas，创建一个与网页可见区域大小相同的画布，通过监听显示区域的resize事件来改变画布的大小。varcanvas=document.getElementById('myCanvas');varcontext=canvas.getContext('2d');functionresizeCanvas(){canvas.width=window.innerWidth;canvas.height=window.innerHeight;}functionclearCanvas(){context.fillStyle='#ffffff';context.fillRect(0,0,canvas.width,canvas.height);}window.addEventListener('resize',resizeCanvas,false);resizeCanvas();燃放烟花前的练习是从一个点以不同的弧线爆炸，所以我们首先围绕一个中心绘制几个小点。有点像loading的小圆圈。这其实就是烟花的初始状态...functionmouseDownHandler(e){varx=e.clientX;vary=e.clientY;drawFireworks(x,y);}functiondrawFireworks(sx,sy){varcount=10;//烟花粒子个数varradius=10;//烟花环绕半径for(vari=0;i
