置顶文章:《纯CSS打造银色MacBook Air(完整版)》上一篇:《对于RegExp反向引用的一点理解》作者主页:myvin 致谢感谢Antineutrino和Cyclone77的意见,点击两位博主id可查看其主页。 因为之前是判断落出视口高度并且大于一个随机数才再次绘制,中间会有一断间隔,所以会有一断一断的感觉,已经将高度判断修改为2/3,这样会好一些,已在文中同步修改,且下文会有对应说明。 再次感谢Antineutrino和Cyclone77,点击两位博主id可查看其主页。 写在前面黑客帝国有一个经典画面:电影开头下绿色数字雨(是数字还是文字,记不清了。。。),这里我们用js来实现,下二进制雨(下什么都可以,只是二进制显得有科技感)。 网上有下文字雨的实现,思路基本上是一样,如感兴趣,请自行搜索。 正文先上效果图: 在这里,我们主要用到的是H5里面的canvas画布标签,canvas只是定义了一个画布,并没有绘制功能,要实现绘制得用js。关于canvas的相关知识请自行搜索,在此不再赘述。 好的,进入正文。 首先是简单reset一下样式:
为了实现一个全屏没有滚动条的效果,这里对于溢出的hidden。 然后定义了一个id为martrix的画布:
接着在画布上进行绘制。 接下来是canvas的一些基本操作,获得上下文环境:
因为是实现视口的全屏效果,所以先获得视口,并设置成画布大小:
接下来我们设置字体大小变量,并根据字体大小来获得二进制雨的列数,同时定义一个数组,用来动态改变y坐标,如下:
然后我们开始写绘制函数drawMatrix: 先给出drawMartrix函数:
因为判断落出视口高度并且大于一个随机数才再次绘制,中间会有一断间隔,所以会有一断一断的感觉,已经将高度判断修改为2/3,这样会好一些。修改的程序如下,并已经在文章同步修改:
简单说一下上面的绘制函数: 首先绘制了一个视口大小的矩形,并用 修改不透明度参数的实时效果,可以点击这里去CodePen上就行修改实时查看效果。 接下来我们设置下落的数字。数字文本是用fillText来绘制的。首先,我们将数字文本颜色设置为green,然后设置数字文本字体大小,在这里加上单位px,context.font=font_size+"px"。接下来就是一个循环了。 这个循环思路是这样的: 用循环来控制显示位置,并在显示位置上绘制数字文本,数组为random的0或1的随机值,然后进行if判断,如果超出屏幕高度,则重新从头绘制。 在 修改random参数的实时效果,可以点击这里去CodePen上就行修改实时查效果。 最后一步就是把绘制函数循环调用:
循环的时间间隔自行设置,修改循环时间间隔参数可以点击这里去CodePen上就行修改实时查效果。 最后,祝大家都过好每一天~~ 转载请记得说明作者和出处哦-.- 上一篇:《对于RegExp反向引用的一点理解》置顶文章:《纯CSS打造银色MacBook Air(完整版)》 |
|
来自: 昵称10504424 > 《工作》