<!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. 《从0到1学习Flink》—— Flink 写入数据到 Kafka

    前言 之前文章 <从0到1学习Flink>-- Flink 写入数据到 ElasticSearch 写了如何将 Kafka 中的数据存储到 ElasticSearch 中,里面其实就已经用 ...

  2. SpringBoot | 第二十一章：异步开发之异步调用

    前言 上一章节,我们知道了如何进行异步请求的处理.除了异步请求,一般上我们用的比较多的应该是异步调用.通常在开发过程中,会遇到一个方法是和实际业务无关的,没有紧密性的.比如记录日志信息等业务.这个时候 ...

  3. Unity C# 运用 GetSaveFileName() 导出Excel文件

    本文原创,转载请注明出处:http://www.cnblogs.com/AdvancePikachu/p/6944870.html 唉哟,这次厉害咯,网上搜罗了好久,终于被我找到汉化的保存对话框了,根 ...

  4. usb-host一步一步学（一）安卓在usb-host模式下列出当前连接的usb设备

    在本次尝试中,我的安卓手机(HTC One X) 通过OTG线作为usb主机模式列出当前插入的usb设备,版本要求minSDKVersion="12". 没有外设的情况下,结果如下 ...

  5. 《大话设计模式》num03-04-05---单一职责原则、开放封闭原则、依赖倒转原则

    2018年03月03日 21:19:19 独行侠的守望 阅读数个人分类: 设计模式 版权声明:本文为博主原创文章,转载请注明文章链接. https://blog.csdn.net/xiaoanzi12 ...

  6. WPF动画的几种模式

    最近在用WPF做简单动画,以下是几点经验总结: 1. 使用DispatcherTimer做动画 VB6的年代大家就用Timer做动画了,不用多解释,这个DispatcherTimer和本身的Timer ...

  7. <Android 基础（五）> MVVM

    介绍 MVVM,Model-View-ViewModel,与上次讲的MVP模式比较的类似,MVP中需要大量的接口文件,而MVVM模式下,View和ViewModel直接关联,使用上比较方便,简化了代码 ...

  8. visual studio2010中C#生成的，ArcGIS二次开发的basetool的dll，注册为COM组件tlb文件，并在arcmap中加载使用

    写了个标题好长啊~~~~ 这两天又认识了一个新玩意,记录一下下,啦啦啦~~~~~ 话说,认识arcgis快十年了,从桌面版到engine的二次开发,其实不过才认识到它的冰山一角, 它总是能带来很多还未 ...

  9. Zabbix邮件报警设置方法

    实现目的: 在Zabbix服务端设置邮件报警,当被监控主机宕机或者达到触发器预设值时,会自动发送报警邮件到指定邮箱. 具体操作: 以下操作在Zabbix监控服务端进行 备注:Zabbix监控服务端 操 ...

  10. python 学习之FAQ:文档内容写入报错

    2017.3.29 FAQ 1. 文档内容写入报错 使用with open() as file: 写入文档时,出现'\xa9'特殊字符写入报错,通过print('\xa9')打印输出“©”. > ...