<!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. svn报错cleanup failed–previous operation has not finished; run cleanup if it was interrupte...

    今天在svn提交的时候它卡顿了一下,我以为已经提交完了,就按了一下,结果就再也恢复不了,也继续不了了... 报错 cleanup failed–previous operation has not f ...

  2. Composition or inheritance for delegating page methods?

    引用链接:http://watirmelon.com/2011/01/24/composition-or-inheritance-for-delegating-page-methods/ Compos ...

  3. C# 的两种debug 方法

    第一种:需要把调试方法改成debug代码用 #if DEBUG 包裹 using System; using System.Collections.Generic; using System.Text ...

  4. 个人整理的jsp、EL表达式、JSTL标签库的笔记，少概念多实用，需要的留下邮箱，会第一时间分享原稿PDF给大家！

    jsp 第一章 jsp介绍及对比servlet 作用: 动态网页技术,动态的从数据库获取数据 jsp和servlet的优缺点: jsp优点:页面表现方便,利于写html代码 jsp缺点:业务逻辑处理麻 ...

  5. iOS开发ReactiveCocoa学习笔记(一)

    学习 RAC 我们首先要了解 RAC 都有哪些类 RACSignal RACSubject RACSequence RACMulticastConnection RACCommand 在学习的时候写了 ...

  6. Java基础反射-调用类

    Student类 package com.test.wang; import java.lang.reflect.Constructor; import java.lang.reflect.Field ...

  7. 使用JS实现图片轮播（前后首尾相接）

    最近各种跑面试,终于还是被问到这个,一脑子浆糊,当时没想出来首尾相接怎么搞,回来之后研究了一波,终于搞出来了,不多说,直接看代码 代码参考了一位已经写好了图片轮播功能的(在此表示感谢),但是没有首尾相 ...

  8. 运用CSS3媒体查询判断iPhoneX、iPhoneXR、iPhoneXS MAX及横竖屏

    //iphoneX.iphoneXs @media only screen and (device-width: 375px) and (device-height: 812px) and (-web ...

  9. mui蒙版使用例子

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name=& ...

  10. Node.js | 你的物联网系统，有个管家待认领

    很多时候,专业的事情都要交给专业的人来做,才会更放心. 例如买了套房,交房装修完毕,欢天喜地入住后,房子的日常养护和维护之类的事情,都由谁来负责呢? 物业呗~买了房子就自然需要房子所在小区提供的物业服 ...