JavaScript实现简单星星闪烁特效

最近学JavaScript，写了一个简单的星星闪烁动画，记录一下思路。

一、画canvas

1、HTML部分

<!DOCTYPE html>
<html>
<head><title>star</title>
</head>
<body>
<canvas id="can"></canvas>
<script type="text/javascript" src="./star.js"></script>
</body>
</html>

2、js部分

二、画静态的星星

1、画星星用的是这样一张序列帧图片./star.png（原图背景透明，这里只是为了看清图片）；

2、定义星星序列帧图片对象；

3、因为星星有很多个，且每个星星的位置不同，闪烁的速度也不同，所以定义一个星星对象，包含星星位置等信息；定义星星对象，属性暂时只有表示星星的横纵坐标；

4、由于每个星星位置不同，因此定义一个初始化函数，用来初始化星星的状态，星星的位置随机生成，且星星的横纵坐标不能超出屏幕外，代码如下，这里x,y前面已经声明过了，表示window的宽高

5、在canvas上画图，需要用到canvas的drawImage()函数，drawImage()函数语法如下，这里用到的是语法3；

// drawImage()
// JavaScript 语法 1
// 在画布上定位图像：
// context.drawImage(img,x,y);// JavaScript 语法 2
// 在画布上定位图像，并规定图像的宽度和高度：
// context.drawImage(img,x,y,width,height);// JavaScript 语法 3
// 剪切图像，并在画布上定位被剪切的部分：
// context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
// img  规定要使用的图像、画布或视频。
// sx   可选。开始剪切的 x 坐标位置。
// sy   可选。开始剪切的 y 坐标位置。
// swidth   可选。被剪切图像的宽度。
// sheight  可选。被剪切图像的高度。
// x    在画布上放置图像的 x 坐标位置。
// y    在画布上放置图像的 y 坐标位置。
// width    可选。要使用的图像的宽度。（伸展或缩小图像）
// height   可选。要使用的图像的高度。（伸展或缩小图像）

定义一个draw()函数，用来画每个星星，序列帧中有7个星星，每个星星宽高为都为7，所以剪切的图片宽高和显示的宽高都为7，目前暂时只显示第一个星星，所以开始剪切的x y坐标都为0；

但是不可能每个星星开始大小都一样，所以我们drawImage()函数中开始剪切的横坐标不能都为0，需要改变开始剪切的横坐标，纵坐标不需要改变。序列帧中有7个星星，每个星星宽为7。给Star对象增加一个start属性，用来表示这7个星星，start值在0~6之间，0表示第一个星星，6为第七个星星，修改后代码如下：

6、定义一个变量num，表示所画星星的个数，再定义一个数组arrStar[]，用来存放每一个星星；

7、生成num个星星，并初始化每个星星状态，最后显示生成的星星

8、为了看到效果，把body背景设置为黑色

此时部分效果图如下，目前所有星星都是静态的

为了有更好的封装性，把生成星星和画星星封装成函数，如下：

三、动态星星

1、要让星星动起来，首先可以让canvas每隔一段时间绘制一次星星，且每次绘制星星，start就++，这样开始剪切的横坐标就变start*7，相当与绘制序列帧中的下一个星星，当start>6的时候，start再从0开始++，即再从第一个星星开始绘制，这样一直循环绘制序列帧中的第一个星星到最后一个星星，理想情况下星星就可闪烁起来了。让星星每隔一段时间绘制一次，我们暂时选用setInterval()定时器；

修改之前的代码：

此时，效果是这样的，并没有想象的闪烁效果，这是因为每次绘制的星星都重叠在了一起，看不出效果；

2、为了让星星闪烁，需要把前一次绘制的星星覆盖掉，可以在每次绘制星星前先绘制一个填充矩形，矩形宽高和canvas宽高一样，默认绘制的矩形是黑色的，把绘制矩形和绘制星星封装到一个loop函数中，代码如下：

此时，星星就闪烁起来了，效果如下：

四、让星星移动

1、目前星星只是闪烁，并没有移动，此时只需要改变星星的x y 坐标就可以让它们移动。所以给星星增加一个x y方向移动的偏移量属性xsp ysp，每次绘制星星，x y就加上对应的偏移量，当x y超出了窗口宽高后，就重新初始化星星状态，代码如下：

此时效果如下：

2、但是，目前星星只向右下方偏移，是因为我们的偏移量始终是大于0的，修改偏移量初始值，让它有正有负，判断超出屏幕情况，代码如下：

效果如图：

目前，星星闪烁动画差不多实现了，但是还有许多需要优化的地方......

JavaScript实现简单星星闪烁特效相关推荐

javascript做极简时钟特效，再简单没思路你也做不出来
点击查看时钟特效极简主义,程序员javascript打造极简时钟特效对于javascript特效的学习,重要的是逻辑思路,所以这个时钟特效不是很华丽,但是功能都展现出来了,而学习javascrip ...
直播app开发搭建，两种很简单的网页特效实现
直播app开发搭建,两种很简单的网页特效实现一.星空 <!DOCTYPE HTML> <html> <head> <meta http-equiv=&quo ...
php 让字体闪烁,js实现文字闪烁特效的方法
本文实例讲述了基于jquery实现省市联动特效的代码,分享给大家供大家参考,具体如下: 运行效果图: 实现原理:使用style对象来设置css属性,结合定时器就可以实现js实现文字闪烁特效. 具体代码 ...
jquery实现星星闪烁功能
实现星星闪烁功能,其实很简单,来看一下完整的代码实现吧! <style>*{margin:0;padding:0;}#box{width:700px;height:700px;backgr ...
【Unity2D】实现Unity中Player受伤以及闪烁特效
学习目标: 参考视频:秦无邪OvO的个人空间_哔哩哔哩_Bilibili 上一篇文章:[Unity2D]简单实现相机跟随Player功能以及攻击敌人时相机抖动_dangoxiba的博客-CSDN博客学 ...
如何仅使用HTML和JavaScript构建简单的URL缩短器
by Palash Bauri 由Palash Bauri 如何仅使用HTML和JavaScript构建简单的URL缩短器 (How to build a simple URL shortener w ...
JavaScript设计模式--简单工厂模式例子---XHR工厂
JavaScript设计模式--简单工厂模式例子---XHR工厂第一步,Ajax操作接口(目的是起一个接口检测作用) (1)引入接口文件 //定义一个静态方法来实现接口与实现类的直接检验 //静态方 ...
js实现html页面倒计30秒,javascript实现简单页面倒计时
这篇文章主要为大家详细介绍了javascript实现简单页面倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了javascript实现简单页面倒 ...
JavaScript如何简单而准确地判断复杂数据类型
javaScript如何简单而准确地判断复杂数据类型? 1:typeof 只能判断出基本数据类型例如: var a = 3; typeof a 的结果为 number var b = []; typ ...
html语言闪烁特效代码,css3 文字闪烁特效代码
今天给大家分享几个文字闪烁特效代码,纯css3代码实现,对于新手小伙伴值得拿来学习一下. 文字闪烁特效一通过改变透明度来实现文字的渐变闪烁,代码如下: 文字闪烁:闪烁效果 .main{ color: ...

JavaScript实现简单星星闪烁特效

JavaScript实现简单星星闪烁特效相关推荐

最新文章

热门文章