实现思路如下:
在页面初始化一个星星。
js中,根据数值去进行循环,clone()页面中的星星。
然后显示追加到页面中。
这样就完成了。
如图所示,当鼠标移上canvas区域的时候,显示星星闪烁的效果,星星本身还会有一个缓慢飘动的速度,当星星飘出canvas区域的时候,该星星消失,canvas区域的某个地方又会重生一个星星。首先准备两张图片:
背景图:girl.jpg
星星的序列帧图片:star.png
js库:commonFunctions.js
项目主文件:index.html
文件目录如下: