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. jAVA HDU1001题

    import java.util.Scanner;public class Main { public static void main(String args[]) { Scanner cin=ne ...

  2. Android（java）学习笔记149：Android线程形态之 AsyncTask （异步任务）

    1. AsyncTask和Handler的优缺点比较: 1)AsyncTask实现的原理和适用的优缺点        AsyncTask是Android提供的轻量级的异步类,可以直接继承AsyncTa ...

  3. 观察者模式Demo

    using System; using System.Collections.Generic; namespace Demo {     #region 抽象层,定义了观察者模式     /// &l ...

  4. 第九篇：web之前端之web上传文件的方式

    前端之web上传文件的方式   前端之web上传文件的方式 本节内容 web上传文件方式介绍 form上传文件 原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe构 ...

  5. Orchard 学习-手动安装Orchard

    通过Orchard zip 文件手动配置网站 这篇文章将引导你如果通过Zip文件来安装Orchard. 我们会使用三种不同的方法来承载Orchard: IIS. WebMatrix and IIS E ...

  6. string应用

    今天在网上搜了一些资料. C# string类应用 判断是否包含子串 想要判断一个字符串中是否包含某个子串,可以用Contains方法来实现: ? public bool Contains (stri ...

  7. XMLHttpRequest cannot load的问题解决方法

      在chrome中可以用--allow-file-access-from-files 命令来解决这个问题.右键点击chrome的快捷方式选择属性.在目标一栏中添加--allow-file-acces ...

  8. 【转】【SQLServer】SQL事务用法begin tran，commit tran和rollback tran的用法

    Sql Server 2005/2008中提供了begin tran,commit tran和rollback tran来使用事务.begin tran表示开始事务, commit tran表示提交事 ...

  9. Virtual Studio C++ Version Macro - _MSC_VER

    MSVC++ (Visual Studio ) MSVC++ (Visual Studio ) MSVC++ (Visual Studio ) MSVC++ (Visual Studio ) MSVC ...

  10. Java 编译解释

    JDK提供的主要开发工具有:编译程序,解释执行程序.调试程序.Applet执行程序.文档管理程序.包管理程序等. 1.编译程序:javac.exe,对应的javac命令将Java源程序转换为字节码. ...