<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>for循环+canvas实现黑客帝国矩形阵</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
*
{
margin: 0;
padding: 0; /*粗暴的清楚公共样式，正式工作场合不建议使用。你要用，那你开心就好！*/
}
.top
{
background: #2c3c51;
}
.top div
{
padding: 5px 0;
text-align: center;
color: #1291a8;
font-family: "微软雅黑";
}
img
{
width: 120px;
}
@media screen and (max-width: 640px)
{
.top div
{
padding: 10px;
}
}
</style>
</head>
<body>
<div class="head">
<canvas id="hacker" width="1600" height="720">请使用最新的浏览器</canvas>
</div>
<script type="text/javascript">
/*
*author：chedabang
*/
window.onload = function () {
var hacker = document.getElementById("hacker");
var width = hacker.width = screen.width;
var height = hacker.height = screen.height*0.8;
var ctx = hacker.getContext('2d');
var num = Math.ceil(width / 10);
var y = Array(num).join(0).split('');
var draw = function () {
ctx.fillStyle = 'rgba(0,0,0,.05)';
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = '#0f0';
ctx.font = '10px Microsoft YaHei';
for (i = 0; i < num; i++) {
var x = (i * 10) + 10;
text = String.fromCharCode(65 + Math.random() * 62);
// console.log(text); text文字检测
var y1 = y[i];
ctx.fillText(text, x, y1);
if (y1 > Math.random() * 10 * height) {
y[i] = 0;
} else {
y[i] = parseInt(y[i]) + 10;
}
}
}

Run();
function Run() {
Game_Interval = setInterval(draw, 30);
}
}
</script>
</body>
</html>

for循环+canvas实现黑客帝国矩形阵的更多相关文章

  1. 车大棒浅谈for循环+canvas实现黑客帝国矩形阵

    背景: 一日在网上闲逛的之时,突然看到一个利用JQ插件实现canvas实现的电影黑客帝国的小Demo.觉得创意不错,就下载下来研究一下. 网上浏览jQuery的写法 $(document).ready ...

  2. canvas实现黑客帝国矩形阵

    在博客园看到了车大棒的写了一篇关于实现黑客帝国矩形阵,觉得canvas还是有一些奇妙的地方所在,故做个笔记记录一下. 实现的效果如下: 真的是一两行关键的代码添加就能实现意想不到的效果. 由于是can ...

  3. HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)

    HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line) 实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何 ...

  4. HTML5 在canvas绘制一个矩形

    笔者:本笃庆军 原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统 ...

  5. WPF使用Canvas绘制可变矩形

    1.问题以及解决办法 最近因为项目需要,需要实现一个位置校对的功能,大致的需求如下:有一个图片,有一些位置信息,但是位置信息可能和实际有些偏差,需要做简单调整,后面会对这张图片进行切割等,做些处理.( ...

  6. 使用canvas绘制渐变色矩形和使用按键控制人物移动

    使用canvas绘制渐变色矩形和使用按键控制人物移动 1.使用canvas绘制渐变色矩形 效果演示 相关代码: <!DOCTYPE html> <html lang="en ...

  7. [HTML5 Canvas学习]绘制矩形

    1.使用strokeRect和fillRect方法绘制矩形 a.strokeRect是绘制一个不填充的矩形 b.fillRect是绘制一个填充的矩形 代码: <script> var ca ...

  8. Javascript高级编程学习笔记（86）—— Canvas(3)绘制矩形

    绘制矩形 矩形是唯一一种可以直接在2D上下文中绘制的形状. 与矩形有关的方法包括: fillRect() strokeRect() clearRect() 上述方法都接收四个参数: 绘制矩形的 X 坐 ...

  9. html5 canvas（基本矩形）

    先从简单的开始 fillRect(x,y,width,height) 在坐标x,y的位置加上一个宽,高   如: fillRect(0,0,500,500)//在坐标0,0处加上一个宽高500的填充矩 ...

随机推荐

  1. 为什么有人会觉得IT门槛低，工资高？

    今天在高铁上,翻着逼乎,被一个话题勾住了,"为什么很多人会觉得IT门槛低?" 我一惊,还真是,身边朋友都觉得"IT赚的多","程序员工资高" ...

  2. HDU 5465——Clarke and puzzle——————【树状数组BIT维护前缀和+Nim博弈】

    Clarke and puzzle Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others ...

  3. 《Head First 设计模式》之迭代器与组合模式——遍历合并的菜单

    迭代器与组合模式(Iterator & Composite) 迭代器:提供一种方法顺序访问一个聚合对象中的各个元素,而又不暴露其内部的表示. 组合:允许你将对象组成树形结构来表现“整体.部分” ...

  4. 原生js添加类名，删除类名

    1.添加类名: document.getElementById("myDiv").classList.add('mystyle'); 2.删除类名: document.getEle ...

  5. /usr/local/sbin/arpspoof

    /usr/local/sbin/arpspoof arpspoof -t 攻击者ip地址 网关ip地址 稍等系,被攻击者机器的arp的缓存就已经变了.

  6. Azure School，让系统化学习回归一站式的简单体验

    承认吧,「终身制学习」已经成为一个不可抵挡的趋势.不管你从事什么行业,几乎已经没有什么可以一直吃老本就能搞定的事情,总有各种新的技术和概念等着你去学.至于发展速度飞快的IT 技术,不断的学习更是贯彻始 ...

  7. webstorm下载激活汉化

    下载 官方下载地址:https://www.jetbrains.com/webstorm/ 激活 参考http://blog.csdn.net/it_talk/article/details/5244 ...

  8. mybatis-mybatis-config.xml详细介绍

    1.mybatis-config.xml 1.1:配置,配置可以是引入外部文件,也可以是在本文件内写配置 <!-- <properties resource="jdbc.prop ...

  9. UOJ#130 【NOI2015】荷马史诗 K叉哈夫曼树

    [NOI2015]荷马史诗 链接:http://uoj.ac/problem/130 因为不能有前缀关系,所以单词均为叶子节点,就是K叉哈夫曼树.第一问直接求解,第二问即第二关键字为树的高度. #in ...

  10. PHP:implode(),emplode() 字符串数组，数组字符串转换函数

    1.implode()-Join array elements with a string(把数组元素组合为一个字符串.) string implode([string $separator,] ar ...