canvas特效黑客帝国（canvas开源）

HTML5模仿黑客帝国文字矩阵特效，怎么样可以确定文字显示

!DOCTYPE html

html

head

title黑客帝国效果/title

/head

body

canvas id="canvas"/canvas

style type="text/css"

body{margin: 0;

padding: 0;

overflow: hidden;}

/style

script type="text/javascript"

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

canvas.height = window.innerHeight;

canvas.width = window.innerWidth;

var texts = '0123456789'.split('');

var fontSize = 16;

var columns = canvas.width/fontSize;// 用于计算输出文字时坐标，所以长度即为列数

var drops = [];//初始值

for(var x = 0; x columns; x++){

drops[x] = 1;

}

function draw(){

//让背景逐渐由透明到不透明

ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';

ctx.fillRect(0, 0, canvas.width, canvas.height);//文字颜色

ctx.fillStyle = '#0F0';

ctx.font = fontSize + 'px arial';//逐行输出文字

for(var i = 0; i drops.length; i++){

var text = texts[Math.floor(Math.random()*texts.length)];

ctx.fillText(text, i*fontSize, drops[i]*fontSize);

if(drops[i]*fontSize canvas.height || Math.random() 0.95){

drops[i] = 0;

}

drops[i]++;}}

setInterval(draw, 33);

/script

/body

HTML5 有哪些让你惊艳的 demo？

说起特效来，HTML5还是很值得称道的：

1、HTML5 Canvas发光Loading动画

之前我们分享过很多基于CSS3的Loading动画效果，相信大家都很喜欢。今天我们要来分享一款基于HTML5Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的，整个loading动画是发光3D的视觉效果，HTML5非常强大。

2、jQuery球状放大镜特效插件

今天我们要来分享一款基于jQuery的放大镜特效插件，和其他放大镜不同的是，这款jQuery放大镜插件是球状的，看上去有3D的视觉效果。当你把鼠标滑过页面上的文字时，即会出现很酷的球状放大镜，来放大当前区域的文字。并且以球心为中心点向外文字逐渐变小，这就产生了立体感。

3、HTML5 Canvas粒子模拟效果

这是一款利用Canvas模拟出来的30000个粒子动画，当你用鼠标在canvas画布上移动时，鼠标周围的一些粒子就会跟着你移动，并形成一定的图案，就像你在玩沙画一样，效果非常不错。这里，我们应用了一些HTML5的特性，让这个粒子动画显得相当动感。

4、HTML5/CSS3带区域地图的联系表单

之前我们分享很多样式和功能各异的CSS3联系表单，比如HTML5/CSS3简易联系表单等等，都非常不错。今天我们要来分享一款功能更加强大的HTML5/CSS3联系表单，它可以选中不同区域显示相应的地图，然后针对该区域填写联系表单。

5、CSS3 3D立方体Loading加载动画特效

之前我们分享过一些HTML5和CSS3的3D立方体特效，他们都是可以旋转来展示3D立体的效果。这次分享的这款CSS3 3D立方体确是用来做Loading加载动画的，9个小立方体上下浮动，呈现波浪的效果，并且，这个Loading动画还利用了CSS3的阴影属性让这些立方体更充满3D色彩。

希望你也可以学起来呀~

html5黑客帝国下面代码大概什么意思呀。谢啦

HTML：

canvas id="c"/canvas

CSS：

canvas {display: block;}

JS：

var c = document.getElementById("c");

var ctx = c.getContext("2d");

//全屏

c.height = window.innerHeight;

c.width = window.innerWidth;

//文字

var txts = "0123456789";

//转为数组

txts = txts.split("");

var font_size = 16;

var columns = c.width/font_size;

//用于计算输出文字时坐标，所以长度即为列数

var drops = [];

//初始值

for(var x = 0; x columns; x++)

drops[x] = 1;

//输出文字

function draw()

{

//让背景逐渐由透明到不透明

ctx.fillStyle = "rgba(0, 0, 0, 0.05)";

ctx.fillRect(0, 0, c.width, c.height);

ctx.fillStyle = "#0F0"; //文字颜色

ctx.font = font_size + "px arial";

//逐行输出文字

for(var i = 0; i drops.length; i++)

{

//随机取要输出的文字

var text = txts[Math.floor(Math.random()*txts.length)];

//输出文字，注意坐标的计算

ctx.fillText(text, i*font_size, drops[i]*font_size);

//如果绘满一屏或随机数大于0.95（此数可自行调整，效果会不同）

if(drops[i]*font_size c.height || Math.random() 0.95)

drops[i] = 0;

//用于Y轴坐标增加

drops[i]++;

}

}

setInterval(draw, 33);

解释了的很详细了。

怎么把黑客帝国的这段代码放在html主页的背后

!--使用position:absolute;z-index:100;--

canvas id="q"/canvas

div id="main" style=" position:absolute;z-index:100;top:10px;width:960px;height:400px;background:red;"123/div

script type="text/javascript" 

var s = window.screen; 

var width = q.width = s.width; 

var height = q.height = s.height; 

var letters = Array(256).join(1).split(''); 

var _div=document.getElementById("main"); 

_div.style.left=(width-960)/2+"px";//给主页面left定位;

var draw = function () { 

q.getContext('2d').fillStyle='rgba(0,0,0,.05)'; 

q.getContext('2d').fillRect(0,0,width,height); 

q.getContext('2d').fillStyle='#0F0'; 

letters.map(function(y_pos, index){ 

text = String.fromCharCode(3e4+Math.random()*33); 

x_pos = index * 10; 

q.getContext('2d').fillText(text, x_pos, y_pos); 

letters[index] = (y_pos  758 + Math.random() * 1e4) ? 0 : y_pos + 10; 

}); 

}; 

setInterval(draw, 33); 

/script