canvas学习之黑客帝国

最新推荐文章于 2024-02-26 11:34:46 发布

笨蛋-木呆呆

最新推荐文章于 2024-02-26 11:34:46 发布

阅读量208

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/qq_33401832/article/details/84553925

版权

canvas 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

先将body的margin和padding清空，body占满全屏

<style>
	body{
		margin: 0;
		padding: 0;
	}
	body,html{
		height: 100%;
	}
</style>

然后新建个canvas节点

<canvas id="can">你得浏览器版本低了</canvas>

最后上js代码

//初始化画布 使之能适应各种屏幕
	can = document.getElementById('can');
	can.style.display = "block";
	var [y,x] = [document.body.offsetHeight,document.body.offsetWidth];
	can.height = y;
	can.width = x;
	var ctx = can.getContext("2d");
	setInterval(init,30);
	
	var contextBox = new Array(300);//创建一个数组  随机生成几个
	contextBox.fill(0);//初始化数组，后面可当垂直坐标使用
	function init(){/**/
		//初始化画布 创建和画布等高的矩形
		ctx.fillStyle = "rgba(0,0,0,.04)";//画布的背景色  单个并没有多黑，但是当很多个矩形框叠在一起就会很黑很黑
		ctx.fillRect(0,0,x,y);//fillRect(x,y,width,height) x,y 坐标 
		//创建文字
		ctx.fillStyle = "green";//文字颜色
		ctx.font = "20px";//文字大小
		contextBox.forEach(function(val,ind){
			var txt = String.fromCharCode(parseInt(Math.random()*26)+65);//随机生成A-Z
			x = ind*10;//水平坐标
			can.getContext('2d').fillText(txt,x,val);//在can节点生成文字
			if (val > Math.random() * 6370 ) {// 下落随机的高度
		    	contextBox[ind] = 0;
		    } else {
		        contextBox[ind] = val + 10;
		    }
		});
		
	}