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. php笔记05：http协议中防盗链技术

    倘若我们自己在电脑上写了一个网站文件(可以是html,php文件等等),但是只希望本机可以访问这个文件,不希望别的电脑访问就需要这里的防盗链技术 1.我们在本地写了一个import.php文件: 而且 ...

  2. uedoc 源码解析

    思路分析 node 包使用 1. JSON5 2. art-template 3.

  3. iOS开发UI篇-tableView在编辑状态下的批量操作(多选)

    先看下效果图 直接上代码 #import "MyController.h" @interface MyController () { UIButton *button; } @pr ...

  4. 深入理解计算机系统第二版习题解答CSAPP 2.6

    使用打印字节的方式可以知道十进制数12345的十六进制为0x00003039,十进制浮点数12345.0的十六进制为0x4640E400. 转换为二进制为 /* 0 0 0 0 3 0 3 9 *** ...

  5. fedora 23 安装genymotion解决方案

    由于学习android开发,都说genymotion模拟器给力,我就尝试了下,安装过程参考 :但出现这种错误:缺少库 libjpeg.so.8 ,我就各种goole和百度找到库(链接地址),解压之后放 ...

  6. T-SQL基础 （存储过程，触发器|| 笔记0808）

    一:存储过程 1.使用EXEC 调用存储过程 2.系统存储过程是以SP_开头,SP_ProcedureName.:例子:EXEC sp_columns TableName 查看列信息   扩展存储过程 ...

  7. SQL Server自动化运维系列 - 多服务器数据收集和性能监控

    需求描述 在生产环境中,很多情况下需要采集数据,用以定位问题或者形成基线. 关于SQL Server中的数据采集有着很多种的解决思路,可以采用Trace.Profile.SQLdiag.扩展事件等诸多 ...

  8. ASP.NET MVC5总结（四）登陆中常用技术解析之验证码

    在应用软件中,登陆系统我们往往会用到验证码技术,下面将介绍在MVC中用到的验证码技术. 1.前端代码段及前端效果图如下 <div class="row"> <in ...

  9. cocoaPods的安装和使用之详细介绍

    一,在Mac OS X上安装Ruby运行环境 步骤1------安装RVM $ curl -L https://get.rvm.io | bash -s stable 然后载入RVM环境 $ sour ...

  10. 摘录android工具类

    import android.content.Context; import android.content.pm.PackageInfo; import android.content.pm.Pac ...