canvas--黑客帝国代码雨

先设置canvas画布 背景黑色

<canvas id="canvas" style="background:#111"></canvas>

简单的css样式

<style>
	*{
		padding:0;
		margin:0;
	}
	html{
		overflow:hidden;
	}
  </style>

下面是主要的js部分

首先我们要获取画布对象 然后设置画布的宽高等于浏览器的宽高

var canvas = document.getElementById("canvas");
var context =canvas.getContext("2d");

var W = window.innerWidth;
var H = window.innerHeight;

canvas.width = W;
canvas.height = H;

设置字体大小 并计算列数

var fontSize = 16;
var list = Math.floor(W /fontSize);

定义一个变量记录每列文字的y轴坐标 给每个文字初始化一个起点位置

var drops = [];
for(var i=0;i<list;i++){
	drops.push(0);
}

定义打印的文字

var str="javascript html5 canvas";

最后是绘画函数

	function draw(){
		//先给canvas设置一些样式
		context.fillStyle = "rgba(0,0,0,0.05)";
		context.fillRect(0,0,W,H);     //满屏填充
		context.font = "700 "+fontSize+"px  微软雅黑";
		context.fillStyle ="#00cc33";
		//并写入画布中
		for(var i=0;i<list;i++){
			var index = Math.floor(Math.random() * str.length);
			var x = i*fontSize;
			var y = drops[i] *fontSize;
			context.fillText(str[index],x,y);
			//时间改变的时候就改变每次文字的起点
			if(y >= canvas.height && Math.random() > 0.99){
				drops[i] = 0;
			}
			drops[i]++;
		}
	};
	//最后调用该函数 并每30毫秒调用一次
	draw();
	setInterval(draw,30);
};

最后的效果是这样的