黑客帝国实现

PROMULGATOR

陈陈呢

美国Linode数据中心

← jQuery滚动加载

→ 超简单的图片预览效果

相关代码

黑客帝国实现

Html

Css

Js

  html,body {
	width:100%;
	height:100%;
	padding:0;
	margin:0;
}
.canvas {
	width:100%;
	height:100%;
	background:#000;
	padding:0;
	margin:0;
	font-size:0;
}

var canvas = document.getElementById("canvas");
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 var context = canvas.getContext('2d');
 var man = Math.ceil(window.innerHeight / 18);
 var lw = Math.ceil(window.innerWidth / 13);
 var row = new Array(lw),
     position = new Array(lw);
 for (var i = 0; i < lw; i++) {
     row[i] = 0;
     position[i] = Math.ceil(Math.random() * man * 2);
 }
 var bj = 0,
     hgh = 0;
 setInterval(function() {
     showText(context);
 }, 50);
 /*
  *显示字母
  * */
 function showText(ctx) {
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
     ctx.font = "14px Arial";
     for (var k = 0; k < lw; k++) {
         if (bj >= position[k]) {
             var wz = row[k] - 14 * man;
             var ls = row[k];
             if (wz < window.innerHeight + 2) {
                 for (var j = 0; j < man; j++) {
                     //col[j]=col[j]+14;
                     ls -= 14;
                     if (ls < 0) {
                         break;
                     }
                     ctx.fillStyle = getRandomColor();
                     ctx.fillText(getchar(), k * 14, ls);
                 }
                 row[k] += 14;
             } else {
                 row[k] = 0;
             } //输出完毕
         } //可以更新的元素
     }
     if (bj < man * 2) {
         bj++;
     }
 }
 /*
  * 产生字符
  * */
 function getchar() {
     return String.fromCharCode(65 + Math.ceil(Math.random() * 57));
 }
 /*
  *产生随机颜色
  * */
 function getRandomColor() {
     return '#' +
         (function(color) {
             return (color += '0123456789abcdef' [Math.floor(Math.random() * 16)]) &&
                 (color.length == 6) ? color : arguments.callee(color);
         })('');
 }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.0.0

立即下载

黑客帝国实现



代码描述：使用html5实现黑客帝国的背景

使用canvas实现

2

最新

发表评论全部评论

暂时没有评论！

邪少0

2017/4/18 20:08:10

很好，我喜欢！回复

AAA0

2017/4/16 21:21:56

学习学习
回复

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>黑客帝国实现-jq22.com</title> <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号