如何利用JSCSS实现根据数值显示星星

JavaScript020

如何利用JSCSS实现根据数值显示星星,第1张

实现思路如下:

在页面初始化一个星星。

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

然后显示追加到页面中。

这样就完成了。

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

首先准备两张图片:

背景图:girl.jpg

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

js库:commonFunctions.js

项目主文件:index.html

文件目录如下: