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 align="center">

<h2>二进制雨</h2>

<-- 宽高原先是1000*600 js忘了改-->
<canvas id="myCanvas" width="480px" height="320px" 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>

    

当时是初学 并没有对代码优化,所以看看就好. 

canvas二进制雨  | 菜鸟工具
预览https://c.runoob.com/codedemo/3301

canvas二进制字符下落的更多相关文章

  1. html5 canvas雨点打到窗玻璃动画

    html5 canvas雨点打到窗玻璃动画 HTML5下雨效果 效果预览:http://hovertree.com/texiao/html5/4.htm 以下是代码: <!doctype htm ...

  2. canvas浅谈 实现简单的自旋转下落

    旋转和平移是2个基础的动画效果,也是复杂动画的基础. 如果是普通的页面只要设置transform属性很容易实现平移+旋转的组合效果,达到自旋转下落的效果.因为操作的直接是动作元素本身很容易理解. 但是 ...

  3. canvas入门级基本用法实现雨滴下落特效

    canvas基础知识点参考各种文档,直接上代码,有非常详细注释 <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  4. canvas仿黑客帝国的字符下落

    ? 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 ...

  5. canvas 制作flappy bird（像素小鸟）全流程

    flappy bird制作全流程: 一.前言 像素小鸟这个简单的游戏于2014年在网络上爆红,游戏上线一段时间内appleStore上的下载量一度达到5000万次,风靡一时, 近年来移动web的普及为 ...

  6. [Canvas前端游戏开发]——FlappyBird详解

    一直想自己做点小东西,直到最近看了本<HTML5游戏开发>,才了解游戏开发中的一点点入门知识. 本篇就针对学习的几个样例,自己动手实践,做了个FlappyBird,源码共享在度盘 :也可以 ...

  7. Canvas修行之黑客帝国代码雨

    既然是修行,不卖弄关子,不吊胃口,修行成果必须先晒一晒. 下图是我用canvas画的黑客帝国代码雨,想起当年看黑客帝国时,那个代码雨场景让我心旷神怡,大开脑洞,满脑子是那种三维空间,无数0和1像雨一样 ...

  8. canvas 俄罗斯方块

    <!doctype html> <html> <body> <canvas id="can" width="360px" ...

  9. Canvas前端游戏开发——FlappyBird详解

    一直想自己做点小东西,直到最近看了本<HTML5游戏开发>,才了解游戏开发中的一点点入门知识. 本篇就针对学习的几个样例,自己动手实践,做了个FlappyBird,源码共享在度盘;也可以参 ...

随机推荐

  1. 《Scala入坑笔记》缘起 3天就搞了一个 hello world

    有小伙伴向我咨询 play framework 的问题,我就想了解一下 play framework ,按照官方的文档,要使用 SBT 安装,就掉进了 SBT 的坑. 第一坑:国外仓库太慢 安装完成后 ...

  2. Android数据库代码优化(2) - 从SQLite说起

    从SQLite说起 如果没有SQLite的基础,我们只是从Android封装的SQLite API去学习的话,难免思路会受到限制.所以,我们还是需要老老实实从头开始学习SQLite. 当我们有一身的S ...

  3. Linux SSH的命令详解[转]

    http://www.linuxidc.com/Linux/2008-02/11055.htm前一阵远程维护Linux服务器,使用的是SSH,传说中的secure shell. 登陆:ssh [hos ...

  4. Gif图片验证码类

    新开发的安全验证码类,支持生成Gif图片验证码(带噪点,干扰线,网格,随机色背景,随机自定义字体,倾斜,Gif动画). 上图: 字体及字体文件的路径需要在类中$FontFilePath及$FontFi ...

  5. 第一章 Linux系统入门

    设定目标,寻求方法,勤奋努力,坚持不懈. ------你们知道了,而我们做到了.------ 世界上第一台计算机:ENIAC(埃尼亚克).1946-2 宾夕法尼亚大学. 约翰·冯·诺依曼体系 电脑的组 ...

  6. rebar安装及创建项目

    rebar作为erlang开发中编译,构建,发布,打包,动态升级的常用工具,下面我记录下rebar工具的安装及使用 从源码安装rebar 1. 建立文件 install_rebar.sh 2. 拷贝如 ...

  7. Python之xpath

    xpath是一种在XML文档中定位元素的语言,常用于xml.html文件解析,比css选择器使用方便XML文件最小构成单元: - element(元素节点) - attribute(属性节点) - t ...

  8. freemarker 常见问题

    <#setting date_format="yyyy-MM-dd"> ..设置时间格式然后获取从后台获取值${s.createTime?date}这样就能正常显示了 ...

  9. MDK中STM32使用Printf函数详细解析【转载】

    在用MDK调试STM32板子串口时,为了方便串口调试,调用了printf()函数,用Keil仿真是,串口不能正确的输出,软件仿真时,总是卡在那 里.有点纳闷,然后调用USART_SendData()函 ...

  10. 文化之旅(dijstra)

    2012_p4 文化之旅 (culture.cpp/c/pas) 时间限制: 1 Sec  内存限制: 128 MB提交: 43  解决: 16[提交][状态][讨论版][命题人:外部导入] 题目描述 ...