1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二进制雨</title>
</head>
<body>
<div style="color:red;text-align: center;font-size: 20px;">二进制雨</div>
<canvas id="myCanvas" width="1000px" height="600px" style="background-color: black;"></canvas>
<script>
  
    var draw=function(ctx,x,y,size){
        this.ctx=ctx;
        this.x=x;
        this.y=y;
        this.size=size;
        var y1=this.y;
        this.drawText=function(){
            var str=Math.ceil(Math.random()*10000).toString(2);
            var grd=this.ctx.createLinearGradient(this.x,this.y,this.x,this.y-this.ctx.measureText(str).width);
            grd.addColorStop(0,"#00FF00");
            grd.addColorStop(1,"#004400");
            this.ctx.fillStyle=grd;
            this.ctx.font=this.size+"px Arial";
            for(var i=str.length-1;i>=0;i--) {
                this.ctx.fillText(str.charAt(i), this.x, y1-=15);
            }
            y1=this.y+=10;
            if(y1-720+this.ctx.measureText(str).width>0){
                this.x=Math.ceil(Math.random()*1000);
                y1=this.y=Math.ceil(Math.random()*100);
            }
        }
    };
  
    var rain=function(ctx,length){
        this.length=length;
        this.ctx=ctx;
        var x=[];
        var y=[];
        var size=[];
        var texts=[];
        var i=0;
        for(;i<length;i++){
            x[i]=Math.ceil(Math.random()*1000);
            y[i]=Math.ceil(Math.random()*500);
            size[i]=Math.ceil(Math.random()*15);
            texts[i]=new draw(this.ctx,x[i],y[i],size[i]);
        }
        this.run=function(){
            ctx.clearRect(0,0,1000,600);
            for(var j=0;j<length;j++){
                texts[j].drawText();
            }
        };
  
    };
  
    var canvas=document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d");
    var rain0=new rain(ctx,100);
    setInterval(rain0.run,50);
  
</script>
</body>
</html>
    

这是以前的博客 效果还行吧。手机看不了 看了也卡。。。。http://blog.chinaunix.net/uid-30494608-id-5201548.html

canvas仿黑客帝国的字符下落的更多相关文章

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

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

  2. Canvas 仿百度贴吧客户端 loading 小球

    前言 几天前在简书上看到在一篇文章<Android仿百度贴吧客户端Loading小球>,看了一下作者,他写了两个好玩的 demo,效果图如下: 今天趁着周末有空,用 H5 的 Canvas ...

  3. for循环+canvas实现黑客帝国矩形阵

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  4. js仿黑客帝国文字数字雨效果

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

  5. jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果

    已经有两年多没登陆csdn账号了,中间做了些旁的事,可是现在却还是回归程序,但改做前端了,虽然很多东西都已忘得差不多了,但还是应该摆正心态,慢慢来,在前端漫游,做一只快乐双鱼. 路是一步一步走出来的, ...

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

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

  7. canvas仿芝麻信用分仪表盘

    这是一个仿支付宝芝麻信用分的一个canvas,其实就是一个动画仪表盘. 首先, 上原图: 这个是在下支付宝上的截图,分低各位见笑了.然后看下我用canvas实现的效果图: <canvas id= ...

  8. HTML5 Canvas实现黑客帝国文字掉落效果

    效果: 原理: 用canvas逐行输出文字,然后让背景颜色逐渐加深,再随机中断某些列. 代码: HTML: <canvas id="c"></canvas> ...

  9. canvas仿屏幕保护运动线条

    canvas是H5中及其重要的一个新标签,它得出现不仅让前端做图形图表功能变得异常强大,还用极强的性能丰富前端渲染页面的能力. Life is not a problem to be solved, ...

随机推荐

  1. 【转】如何优化Cocos2d-X游戏的内存

    Published on 2013 年 2 月 4 日, by donglin http://blog.chukong-inc.com/index.php/2013/02/04/%E5%A6%82%E ...

  2. 常用工具之zabbix

    简介 zabbix(音同 zæbix)是一个基于WEB界面的提供分布式系统监视以及网 络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制 ...

  3. Windows redis集群搭建

    一.Windows下Redis安装 下载地址https://github.com/dmajkic/redis/downloads,下载到的Redis支持32bit和64bit.根据自己实际情况选择,本 ...

  4. ecshop在PHP 5.4以上版本各种错误问题处理

    在php5.4版本之后有很多的函数与功能进行丢弃与升级功能了,现在国内很多CMS都还未按php5.4标准来做了,下面我整理了一些在ecshop在PHP 5.4以上版本各种错误问题处理. 1.PHP 5 ...

  5. c#之内置类型

    内置类型:就是.NET Framework System命名空间中写好的类型. 下面看看C#都有哪些内置类型 上面的内置类型,除了string和object外,其他的都被称作简单类型.也可以把左边的看 ...

  6. SQL Cursor 游标的使用

    DECLARE @name VARCHAR(50)  --声明游标 DECLARE cursor_VAA1 CURSOR FOR SELECT VAA05 FROM VAA1 --打开游标 OPEN ...

  7. 学习笔记7_Java_day11_JSP原理（5）

    4. jsp原理(理解) * jsp其实是一种特殊的Servlet > 当jsp页面第一次被访问时,服务器会把jsp编译成java文件(这个java其实是一个servlet类) > 然后再 ...

  8. 【转】 iOS 学习之 NSPredicate 模糊、精确、查询

    简述:Cocoa框架中的NSPredicate用于查询,原理和用法都类似于SQL中的where,作用相当于数据库的过滤取. 定义(最常用到的方法): NSPredicate *ca = [NSPred ...

  9. jjQuery 源码分析1: 整体结构

    目前阅读的是jQuery 1.11.3的源码,有参考nuysoft的资料. 原来比较喜欢在自己的Evernote上做学习基类,并没有在网上写技术博客的习惯,现在开始学习JS的开源代码,想跟大家多交流, ...

  10. Spring Mvc 笔记二之异常和文件上传

    spring mvc的异常与文件上传 1.异常: spring注解版的异常有局部异常和全局异常                1.局部异常对单个controller有效;(在controller类写一 ...