我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

在电视当中我们会看到很多酷炫的画面,比如程序员在操作界面,尤其是一些大佬操作的界面,电视效果拉满了,但是他们想不到现实中的程序员压根就不是这样,但是这样的我们也可以实现,现在正值新春佳节,我们就来实现这个效果.

实现思路

我们实现一个可以用div去模拟,当然也可以用canvas去实现,如果用div去模拟,涉及到大量的原生操作dom了,所以我们果断地抛弃这种方式,取而代之的是用canvas,我们可以在画布上面任意画我们需要的东西.

由于是满屏的效果,我们需要大量的文字,兔
需要使用canvas的api叫做 fillText将我们初始化的文字画在画布上
上面两部基本可以将文字画在画布上了,但是我们要将文字铺满全屏且让它动起来,所以需要初始化一个数组,里面放置每个文字的位置,且后面也要实时修改.
基于上面三步可以得到一个全屏的效果,再使用setInterval让画布重复渲染.

知识点讲解

fillText方法在画布上绘制填色的文本。文本的默认颜色是黑色。

context.fillText(text,x,y,maxWidth);

关键代码如下:

var char = new Array(30).fill("兔");

var fontSize = 16;
var columns = W/fontSize;
var decY = [];
var active = 1;

for(var n = 0; n < columns; n++)
	decY[n] = Math.round(Math.random() * (H/10)); 

ctx.fillStyle = "black";
ctx.fillRect(0, 0, W, H);
function draw()
{
	ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
	ctx.fillRect(0, 0, W, H);
	
	ctx.fillStyle = "#fff";
	ctx.font = fontSize + "px Matrix";

	for(var i = 0; i < decY.length; i++)
	{
		var text = char[Math.floor(Math.random()*char.length)];
		ctx.fillText(text, i*fontSize, decY[i]*fontSize);
		if(decY[i]*fontSize > H && Math.random() > 0.98){
			decY[i] = 0;
		}

		decY[i]++;
	}
}

酷炫的兔子

实现思路

知识点讲解

结果: