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. 分享功能使用的UIPopoverController在iOS9 过期，替换为popoverPresentationController

    记录一下 以备以后用到的时候拿出来看看.以前使用的: 1 if (UIDevice.currentDevice().userInterfaceIdiom == UIUserInterfaceIdiom ...

  2. 对ContentProvider中getType方法的一点理解

    在上篇博客中我们介绍了自定义ContentProvider,但是遗漏掉了一个方法,那就是getType,自定义ContentProvider一般用不上getType方法,但我们还是一起来探究下这个方法 ...

  3. Android（java）学习笔记144：Android音视频录制类MediaRecorder用法举例

    Android语音录制可以通过MediaRecorder和AudioRecorder.MediaRecorder本来是多媒体录制控件,可以同时录制视频和语音,当不指定视频源时就只录制语音(默认录制语言 ...

  4. 关于“VS2010语法检查红线不见了”的解决方案

    操作步骤:工具=>导入导出设置=>重置所有设置=>重置C#(一般选择这个,其他没试过) 等待1分钟,over.

  5. 参加魅族 flyme 互联网编程大赛的一些感受

    为期两天的 flyme 编程大赛已经结束了,自己也在这次大赛中深有感触,受益颇丰. 在这次大赛里,认识到了很多厉害的开发者,有单打独斗的,也有四五成群的.开幕致辞上看到很多非常有创意的点子,感觉每个队 ...

  6. U3D 2D游戏之黑暗纪元 2D游戏基础入门开发全(1)

    第一个U3D 2D游戏的例子,全部自己编写,算是入门用,这里记录一下. 1.首先游戏把层次布置好,这里分为 背景层,游戏层,UI层 背景层 (Background-1):就是单纯的背景显示作用. 游戏 ...

  7. c3p0配置文件报错 对实体 "characterEncoding" 的引用必须以 ';' 分隔符结尾。

    原配置文件: 异常截图: 百度可知: 在xml的配置文件中 :要用  &   代替 更改后配置文件:

  8. MVC小系列（十二）【RenderAction和RenderPartial区别】

    二者作用:RenderAction:渲染分部视图到页面上,要求提供Action和控制器名称RenderPartial:渲染分部视图到页面上,要求提供分部视图的名称,即路径,如果是在当前控制下或者sha ...

  9. web services 接口测试方法

    public class Test { public static void main(String[] args) { JaxWsProxyFactoryBean factory = new Jax ...

  10. javascript面向对象程序设计系列(一)---创建对象

    javascript是一种基于对象的语言,但它没有类的概念,所以又和实际面向对象的语言有区别,面向对象是javascript中的难点之一.现在就我所理解的总结一下,便于以后复习: 一.创建对象 1.创 ...