快过年了，用JS让你的网页放烟花的时候，大城市的孩子再也体会不到这种快乐了。但是作为前端工程师，这对我们来说不是问题。下面教大家如何用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
