<!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. 5 - ByteBuf-替换ByteBuffer-字节操作

    a). 容量可按需增长,类似(StringBuilder) b). 读写模式之间不需要flip切换 c). 读和写使用不同的索引-writerIndex/readerIndex d). 支持方法的链式 ...

  2. Maven配置默认JDK/JRE版本

    1. settings.xml的profiles标签下配置 <profile> <id>jdk-1.8</id> <activation> <ac ...

  3. 新浪php面试题

    1. echo count("abc"); 输出什么?答:"1" count — 计算数组中的单元数目或对象中的属性个数int count ( mixed $v ...

  4. 抓包工具wireshark的使用--过滤语句

    鲨鱼鳍的图标 抓包很方便

  5. AngularJS（十）：依赖注入

    本文也同步发表在我的公众号“我的天空” 依赖注入 依赖注入不是AngularJS独有的概念,而是现代软件开发与架构的范畴,但是在AngularJS中“依赖注入”是其核心思想之一,所以我们专门来学习一下 ...

  6. 学习笔记：Web Storage API

    Web Storage API 提供了存储机制,通过该机制,浏览器可以安全地存储键值对,比使用 cookie 更加直观. Web Storage 包含如下两种机制: sessionStorage 为每 ...

  7. Spring MVC中注解的简介

    参考网址:  https://blog.csdn.net/a67474506/article/details/46361195 @RequestMapping映射请求 SpringMVC 使用 @Re ...

  8. 《Unity預計算即時GI》笔记：三、Clusters和总结

    Clusters 叢集,透過修改叢集(Clusters)也是一個降低Unity預計算流程所需要執行的工作數量的好方法.降低叢集數量也能提高執行時的效能. 當採用PRGI來計算場景光照時,Unity會簡 ...

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

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

  10. iOS开发资料

    https://github.com/XCGit/awesome-objc-frameworks https://github.com/KevinHM/ios-good-practices-the-l ...