html动画之制作烟花效果,JavaScript实现烟花绽放动画效果

先编写一个烟花绽放的动画效果。

放烟花时，一个烟花可分为两个阶段：(1)烟花上升到空中；(2)烟花炸开成碎片，炸开的碎片慢慢消散。

为此抽象出两个对象类：Firework和Particle。其中，Firework用于表示一个烟花对象，Particle用于表示一个烟花炸开后的各碎片。

Firework对象类定义6个属性：表示烟花上升轨迹中各点的坐标(x,y)、烟花弧状轨迹的偏转角度angle、上升阶段水平和垂直方向的位移改变量xSpeed和ySpeed、烟花的色彩色相hue。

坐标属性值y的初始值取画布的高度，表示烟花从地面上升到空中，其余各属性的初始值采用随机数确定。具体定义如下：

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);

}

Firework对象类定义3个方法：绘制烟花上升轨迹的方法draw()、烟花上升时坐标改变方法update()和烟花炸开方法explode()。绘制烟花轨迹时，在各点(x,y)处绘制一个宽度为5、高度为15的填充小矩形表示一个轨迹点。烟花上升时，垂直方向速度ySpeed初始值为负的，每次上升时，ySpeed加上一个正值，表示上升在减速，当ySpeed的值大于0时，烟花上升到顶了(不能再上升)，就炸开为70个碎片。具体方法的实现见后面的HTML文件内容。

Particle对象类定义8个属性：表示碎片散开轨迹中各点的坐标(x,y)、碎片弧状轨迹的偏转角度angle、散开时水平和垂直方向的位移改变量xSpeed和ySpeed、碎片的色彩色相hue、表示碎片小圆的半径size、碎片的亮度lightness。

function Particle(x,y,hue)

{

this.x = x;

this.y = y;

this.hue = hue;

this.lightness = 50;

this.size = 15 + Math.random() * 10;

this.angle = Math.random() * 2 * Math.PI;

this.xSpeed = Math.cos(this.angle) *(1+Math.random() * 6);

this.ySpeed = Math.sin(this.angle) *(1+Math.random() * 6);

}

Particle对象类定义2个方法：绘制碎片散开轨迹的方法draw()、碎片散开时坐标改变方法update()。碎片散开时逐渐变小(属性size值减量)，当size值小于1时，从碎片数组中删除该碎片，表示碎片已消亡。

定义两个数组var fireworks=[];和var particles=[];分别存储烟花对象和炸开的碎片对象。

模拟动画的函数loop中，每隔一段时间(用count计数来实现)向fireworks数组中添加一个烟花对象，烟花对象上升到顶炸开后，从fireworks数组中删除该对象元素，然后向particles数组中添加70个碎片对象。

遍历两个数组的各对象，分别调用它们的draw()和update()方法。

编写的完整HTML文件内容如下。

烟花绽放

var canvas=document.getElementById('myCanvas');

ctx= canvas.getContext('2d');

var fireworks=[];

var particles=[];

var counter = 0;

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.ang