h5画布中如何实现黑客帝国矩形阵效果

　　介绍

这篇文章将为大家详细讲解有关h5画布中如何实现黑客帝国矩形阵效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

在博客园看到了车大棒的写了一篇关于实现黑客帝国矩形阵,觉得帆布还是有一些奇妙的地方所在,故做个笔记记录一下。

实现的效果如下:

h5画布中如何实现黑客帝国矩形阵效果

真的是一两行关键的代码添加就能实现意想不到的效果。

由于是画布上实现的,所有首先第一步就是在页面添加帆布标签,如下:

& lt;帆布id=癱anvas"祝辞请使用高版本浏览器,IE8以及一下不支持canvas

css代码:

html,身体{高度:100%;溢出:隐藏}

由于实现的效果是帆布全屏显示在浏览器中,所有下一步就是把屏幕的宽高赋值给画布,如下:

 var宽度,高度,
　　帆布=. getelementbyid (“canvas");
　　画布。宽度=宽度=窗口。innerWidth | | document.documentElement。clientWidth | | document.body.clientWidth;
　　画布。身高=身高=窗口。innerHeight | | document.documentElement。clientHeight | | document.body.clientHeight;

创建画布的2 d绘图环境,如下:

 var ctx=canvas.getContext (& # 39; 2 d # 39;);

下面创建一个数组,用一个数组来干嘛呢,主要是用数组来存放画布中文字的Y值。不懂的话看完就全明白了。

var num=数学。装天花板(宽/10); 　　var y=阵列(num) . join (0) .split (& # 39; & # 39;);

num的值就是把屏幕的宽度分割成num份,也即是num列,每列的宽度是10 px。

画布的绘图代码:

　　& lt;脚本类型=拔谋?javascript"比;
　　窗口。onload=function () {
　　var宽度,高度,
　　帆布=. getelementbyid (“canvas");
　　画布。宽度=宽度=窗口。innerWidth | | document.documentElement。clientWidth | | document.body.clientWidth;
　　画布。身高=身高=窗口。innerHeight | | document.documentElement。clientHeight | | document.body.clientHeight;
　　var ctx=canvas.getContext (& # 39; 2 d # 39;);
　　var num=数学。装天花板(宽/10);
　　var y=阵列(num) . join (0) .split (& # 39; & # 39;);
　　var画=function () {
　　ctx。fillStyle=& # 39; rgba (0, 0, 0 . 05) & # 39;;//核心代码,创建黑色背景,透明度为0.05的填充色。
　　ctx。fillRect(0, 0,宽度、高度);
　　ctx。fillStyle=& # 39; # 0 f0 # 39;;//设置了字体颜色为绿色
　　ctx。微软字体=& # 39;10 px YaHei& # 39;;//设置字体大小与家庭
　　(我=0;我& lt;num;我+ +){
　　var x=(我* 10)+ 10;
　　文本=String.fromCharCode math . random () * (65 + 62);
　　var日元=y[我];
　　ctx。fillText(文本、x、y?);
　　如果日元比;math . random() * 10 *高度){
　　[我]y=0;
　　其他}{
　　y[我]=方法(y[我])+ 10;
　　}
　　}
　　}
　　
　　;(函数(){
　　setInterval(画,100);
　　}) ();
　　
　　}
　　& lt;/script> 
h5画布中如何实现黑客帝国矩形阵效果