小編給大家分享一下JavaScript中實現(xiàn)煙花綻放動畫效果的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)專注于企業(yè)成都營銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、蘆淞網(wǎng)站定制設(shè)計、自適應品牌網(wǎng)站建設(shè)、HTML5建站、商城系統(tǒng)網(wǎng)站開發(fā)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為蘆淞等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

      先編寫一個煙花綻放的動畫效果。

      放煙花時，一個煙花可分為兩個階段：（1）煙花上升到空中；（2）煙花炸開成碎片，炸開的碎片慢慢消散。

      為此抽象出兩個對象類：Firework和Particle。其中，F(xiàn)irework用于表示一個煙花對象，Particle用于表示一個煙花炸開后的各碎片。

      Firework對象類定義6個屬性：表示煙花上升軌跡中各點的坐標（x,y）、煙花弧狀軌跡的偏轉(zhuǎn)角度angle、上升階段水平和垂直方向的位移改變量xSpeed和ySpeed、煙花的色彩色相hue。

      坐標屬性值y的初始值取畫布的高度，表示煙花從地面上升到空中，其余各屬性的初始值采用隨機數(shù)確定。具體定義如下：

  function Firework()

  {

   this.x = canvas.width/4*(1+3*Math.random());

   this.y = canvas.height - 15;

   this.angle = Math.random() * Math.PI / 4 - Math.PI / 6;

   this.xSpeed = Math.sin(this.angle) *(6+Math.random()*7);

   this.ySpeed = -Math.cos(this.angle) *(6+Math.random()*7);

   this.hue = Math.floor(Math.random() * 360);

  }

文章題目：JavaScript中實現(xiàn)煙花綻放動畫效果的方法-創(chuàng)新互聯(lián)
文章源于：http://weahome.cn/article/doccop.html