<!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. Unity3D游戏高性能战争迷雾系统实现

    一 效果图 先上效果图吧,这是为了吸引到你们的ヽ(｡◕‿◕｡)ﾉﾟ 战争迷雾效果演示图 战争迷雾调试界面演示图 由于是gif录制,为了压缩图片,帧率有点低,实际运行时,参数调整好是不会像这样一卡一顿的 ...

  2. UVALive 4262——Trip Planning——————【Tarjan 求强连通分量个数】

    Road Networks Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Submit Stat ...

  3. JSPt的Base标签

    <base href="${pageContext.request.contextPath}/"/> 注意:base标签得到的内容是: /projectName/ 这种 ...

  4. MongoDB 3.2 在CentOS 上的安装和配置

    MongoDB 3.2 在CentOS 上的安装和配置   2016-01-06 14:41:41 发布 您的评价:       0.0   收藏     0收藏 一.安装 编辑/etc/yum.re ...

  5. 全面理解HTTP协议

    引言:作为一名软件工程Web专业学生,对于HTTP的熟悉掌握是必不可少的,特此做记录,打造自己的HTTP栈. URL与URI 我们经常接触到的就是URL了,它就是我们访问web的一个字符串地址,那么U ...

  6. CSS中box-sizing属性的作用

    今天在项目中看到box-sizing这个属性,以前用过,但是不常用!注意,它是CSS3里的属性喔! W3C 盒子模型:标准盒模型,是指块元素box-sizing属性为content-box的盒模型.一 ...

  7. orbbec astra ros

    install instruction: https://www.ncnynl.com/archives/201703/1444.html problem: [ERROR] [1481169521.4 ...

  8. python3基础09（装饰器的使用）

    #!/usr/bin/env python# -*- coding:utf-8 -*- import time #方式1class People: def __init__(self, name, a ...

  9. 送H-1B 及其他I-129 申请别忘用新表

    (梁勇律师事务所,lianglaw.com专稿)移民局从2010年11月23日 更新了申请H-1B 及其他非移民工作签证I-129 表,从2010年12月23日以后收到的I-129表都必须是2010年 ...

  10. Python参数基础

    Python参数基础 位置参数 ​ 通过位置进行匹配,把参数值传递给函数头部的参数名称,顺序从左到右 关键字参数 ​ 调用的时候使用参数的变量名,采用name=value的形式 默认参数 ​ 为没有传 ...