使用Canvas绘制星星闪烁的效果

JavaScript019

使用Canvas绘制星星闪烁的效果,第1张

如图所示，当鼠标移上canvas区域的时候，显示星星闪烁的效果，星星本身还会有一个缓慢飘动的速度，当星星飘出canvas区域的时候，该星星消失，canvas区域的某个地方又会重生一个星星。

首先准备两张图片：

背景图：girl.jpg

星星的序列帧图片：star.png

js库：commonFunctions.js

项目主文件：index.html

文件目录如下：

实现思路如下：

在页面初始化一个星星。

js中，根据数值去进行循环，clone()页面中的星星。

然后显示追加到页面中。

这样就完成了。

1、打开flash 软件，点击我的文档，打开工作界面。点击属性面板，把编辑界面的颜色为黑色。左键对准矩形工具，按住不动，这时候就出现一个小工具面板，在里面选择“多角星形工具”。在属性面板里找到<<选项>>.然后点击选项，多边形改成《星形》。《星形顶角大小》改成《0.20>.《边数》改成《4》。颜色改成《放射状》。颜色为灰色。在编辑区内画一个，4变形的星形。

2、画完以后，点击第一帧再点击上面的《修改》《分离》然后点击第十帧插入关键帧。同样点击修改--分离。然后调整透明度为零。

3、再点击第20帧，右键点击插入关键帧，同样点击修改--分离，调整透明度为100.。然后点击第10帧，添加形状补间。点击第20帧，添加形状补间动画。然后测试影片，保存为jif动画。

4、点击第5帧，在属性面板，《补间》里点击形状补间。再点击第15帧，在下面的《补间》里点击形状补间。然后点击《控制》测试影片，保存为gif 动画。