<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
canvas{
display: block;
}
</style>
</head>

<body>
<canvas id="canvas"></canvas>
<script>
function $(id){
return document.getElementById(id);
}
//画布 的大小设置
var mywindow=window.screen;
var canvas=$("canvas");
canvas.width=mywindow.width;
canvas.height=mywindow.height;

//要输出的信息
var str="0123456789";
str=str.split("");
var fontSize=16;//输出字体的大小
//每列显示多少个信息
var cols=canvas.width/fontSize;
//数组，统计下落的位置
var drops=[];
for(var i=0;i<cols;i++){
drops[i]=1;
}
//
var ctx=canvas.getContext("2d");
function draw(){
/**
*这的黑客帝国：
* 获取页面的 大小 包括宽度和高度
* 用cols获取能够宽度加载列数
* drops加载每一列的位置
* drops[2]=10 2为第二排的 top为10
*/
ctx.fillStyle="rgba(0,0,0,0.05)";
ctx.fillRect(0,0,canvas.width,canvas.height);

ctx.fillStyle="green";
ctx.font=fontSize+"px arial";
for(var i=0;i<cols;i++){

var text=str[ Math.floor( Math.random() * (str.length) ) ];
// console.info("x-"+i*fontSize);
// console.info("y-"+drops[i]*fontSize);
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>

</html>

HTML5-黑客帝国2D的更多相关文章

  1. 赠书：HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...

  2. HTML5之2D物理引擎 Box2D for javascript Games 系列 翻外篇--如何结合createJS应用box2d.js

    太久没有更新了,新年回来工作,突然有收到网友的邮件提问,居然还有人在关注,惭愧,找了下电脑上还有一点儿存着,顺便先发这一个番外篇吧,好歹可以看到真实的效果,等我考完英语,一定会更新下一章," ...

  3. HTML5 Canvas 2D library All In One

    HTML5 Canvas 2D library All In One https://github.com/search?q=Javascript+Canvas+Library https://git ...

  4. HTML5 Canvas 2D绘图

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/4851774. ...

  5. HTML5的 2D SVG和SVG DOM的学习笔记（2）---SVG动画

    SVG支持动画.可以通过以下几种方法获得动画效果: 使用SVG动画元素.SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀.收缩.旋转和变换颜色. 使用S ...

  6. HTML5的 2D SVG和SVG DOM的学习笔记（1）

    (项目中要使用SVG,只好补充知识了) HTML体系中,最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素.这两种技术都支持绘制矢量图和光栅图. 一.SVG概述 可缩放矢量图形(Sc ...

  7. HTML5之2D物理引擎 Box2D for javascript Games 系列 第三部分之创建图腾破坏者的关卡

    创建图腾破坏者的关卡 现在你有能力创建你的第一个游戏原型,我们将从创建图腾破坏者的级别开始. 为了展示我们所做事情的真实性,我们将流行的Flash游戏图腾破坏者的一关作为 我们模仿的对象.请看下面的截 ...

  8. HTML5之2D物理引擎 Box2D for javascript Games 系列 第二部分

    这是系列第二部分,之前部分在本博客中找 源码demo存放在https://github.com/willian12345/Box2D-for-Javascript-Games 向世界添加刚体 刚体(B ...

  9. HTML5之2D物理引擎 Box2D for javascript Games 系列 第一部分

    我要的是能在H5页面上跑的javascript版的Box2D啊!!! 最近想学习Javascript版本的Box2D JS物理引擎,无奈搜了半天也没找到相对比较系统的资料 官方网站也只是简单的介绍,A ...

  10. HTML5游戏2D开发引擎

    1.PixiJS(基于webGl和canvas) 官网:http://www.pixijs.com/ github(star:20672):https://github.com/pixijs/pixi ...

随机推荐

  1. 在word 2013中输入latex公式

    注意:版权所有,转载请注明出处 向word输入LaTeX公式,插件有很多,前面在使用的是一个叫做Aurora的插件,结果不是免费的,用了一段时间就要收费是,所以就不用了,从网上找到别人的介绍,可以使用 ...

  2. [基础] Loss function（一）

    Loss function = Loss term(误差项) + Regularization term(正则项),我们先来研究误差项:首先,所谓误差项,当然是误差的越少越好,由于不存在负误差,所以为 ...

  3. 客户端MapReduce提交到YARN过程

    在Mapreduce v1中是使用JobClient来和JobTracker交互完成Job的提交,用户先创建一个Job,通过JobConf设置好参数,通过JobClient提交并监控Job的进展,在J ...

  4. Java HexString

    byte[]和十六进制字符串相互转换 Java中byte用二进制表示占用8位,而我们知道16进制的每个字符需要用4位二进制位来表示. 所以我们就可以把每个byte转换成两个相应的16进制字符,即把by ...

  5. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（26）-权限管理系统-分配角色给用户

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(26)-权限管理系统-分配角色给用户 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x ...

  6. Android 颜色渲染(九) PorterDuff及Xfermode详解

    版权声明:本文为博主原创文章,未经博主允许不得转载. Android 颜色渲染(九)  PorterDuff及Xfermode详解 之前已经讲过了除ComposeShader之外Shader的全部子类 ...

  7. java EE 学习

    http://blog.csdn.net/liushuijinger/article/category/1342030/1

  8. iOS-UIResponse之事件响应链及其事件传递

    UIResponse之事件响应链及其事件传递 我们的App与用户进行交互,基本上是依赖于各种各样的事件.一个视图是一个事件响应者,可以处理点击等事件,而这些事件就是在UIResponder类中定义的. ...

  9. Some code changes cannot be hot swapped into a running virtual machine,

    翻译一下:不能热交换到运行虚拟机,一些代码变化不能热交换到运行虚拟机,如更改名称或介绍的方法错误运行代码.解决方法:增加.删除类文件或者在一个类中增加.删除方法时,是不能够热部署到服务上的.这时候需要 ...

  10. Android（java）学习笔记197：常用的对话框

    一.常见对话框属性: 1. AlertDialog.Builder属性  • setTitle: 为对话框设置标题 :• setIcon : 为对话框设置图标:• setMessage: 为对话框设置 ...