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. Debugging to Understand Finalizer--reference

    This post is covering one of the Java built-in concepts called Finalizer. This concept is actually b ...

  2. 爬虫神器XPath，程序员带你免费获取周星驰等明星热门电影

    本教程由"做全栈攻城狮"原创首发,本人大学生一枚平时还需要上课,但尽量每日更新文章教程.一方面把我所习得的知识分享出来,希望能对初学者有所帮助.另一方面总结自己所学,以备以后查看. ...

  3. WildFly 9.0.2+mod_cluster-1.3.1 集群配置

    一.配置背景 最近使用WildFly 9.0.2作为中间件开发系统,给客户不熟的时候需要使用集群来进行负载均衡,一开始想到是使用Nginx.但是只通过Nginx使用 ip_hash 模式没有做到ses ...

  4. 学习笔记_过滤器详细（过滤器JavaWeb三大组件之一）

    过滤器详细 1 过滤器的生命周期 我们已经学习过Servlet的生命周期,那么Filter的生命周期也就没有什么难度了! (l)  init(FilterConfig):在服务器启动时会创建Filte ...

  5. Centos6.5 64linux系统基础优化（二）

    1  操作的最小化原则 1)安装系统最小化 2)开启程序服务最小化原则 3)操作最小化原则 4)登陆最小化原则;平时没有需求不用root登陆,要用普通登陆. 2  更改ssh服务默认端口及常规配置 # ...

  6. C#&JQ仿网上商城商品条件筛选功能

    1.后台绑定: 一种案例: 根据第一级显示第二级,并带有每个二级的“全部”功能: #region 绑定区域 #region 绑定一级区域 ) <= ? : (PageIndex - )) + , ...

  7. XMPP适配IPV6 (GCDAsyncSocket适配IPV6)

    苹果公司要求在6月1号之后上架Appstore的应用必须通过ipv6兼容测试. 最近到了八月份,开始发现新上架的app没有通过,查看了下原因,说没有适配IPV6. 首先在本地搭建一个IPV6的测试环境 ...

  8. OC - 11.使用Quartz2D剪裁图片并保存

    实现效果 操作步骤 绘制一个矩形框,弹出一个alertView,提示是否保存图片 点击"是",将图片保存到相册 在相册中查看保存的图片 效果图 实现思路 在控制器的view上添加一 ...

  9. mkisofs出错解决办法

    使用mkisofs遇到错误: genisoimage: Uh oh, I cant find the boot catalog directory 'beini/boot/isolinux'! 使用的 ...

  10. 执行mysql脚本

    方法1: mysql -uroot -p123456 -Ddatabasename < sql文件路径 方法2: source 路径全名 \. 路径全名