window.onload=function() {

　　//获取图形对象

　　var canvas=document.getElementById("canvas");

　　//获取图形的上下文

　　var context=canvas.getContext("2d");

　　//获取浏览器屏幕的宽度和高度

　　var W=window.innerWidth;

　　var H=window.innerHeight;

　　//设置canvas的宽度和高度

　　canvas.width=W;

　　canvas.height=H;

　　//每个文字的字体大小

　　var fontSize=15;

　　//计算列

　　var colunms=Math.floor(W / fontSize);

　　//记录每列文字的y轴坐标

　　var s=[];

　　//给每一个文字初始化一个起始点的位置

　　for (var i=0; i

　　s.push(0);

　　}

　　//运动的文字

　　var str="01abcdefghijklmnopqurstuvwxyz";

　　//4:fillText(str,x,y);原理就是去更改y的坐标位置

　　//绘画的函数

　　function draw() {

　　//让背景逐渐由透明到不透明

　　context.fillStyle="rgba(0,0,0,0.05)";

　　context.fillRect(0, 0, W, H);

　　//给字体设置样式

　　//context.font="700 "+fontSize+"px 微软雅黑";

　　context.font=fontSize + 'px arial';

　　//给字体添加颜色

　　context.fillStyle="green"; //随意更改字体颜色

　　//写入图形中

　　for (var i=0; i =canvas.height && Math.random() > 0.92) {

　　s[i]=0;

　　}

　　s[i]++;

　　}

　　};

　　function randColor() {

　　var r=Math.floor(Math.random() * 256);

　　var g=Math.floor(Math.random() * 256);

　　var b=Math.floor(Math.random() * 256);

　　return "rgb(" + r + "," + g + "," + b + ")";

　　}

　　draw();

　　setInterval(draw, 33);

　　};

　　import random

　　

　　import pygame

　　

　　FONT_PX=15

　　

　　pygame.init()

　　

　　winSur=pygame.display.set_mode((640, 480))

　　

　　font=pygame.font.SysFont("fangsong", 20)

　　

　　bg_suface=pygame.Surface((640, 480), flags=pygame.SRCALPHA)

　　

　　pygame.Surface.convert(bg_suface)

　　

　　bg_suface.fill(pygame.Color(0, 0, 0, 13))

　　

　　winSur.fill((0, 0, 0))

　　

　　# 相关参数

　　texts=[font.render(str(i), True, (0, 255, 0)) for i in range(10)]

　　colums=int(640 / FONT_PX)

　　drops=[0 for i in range(colums)]

　　

　　while True:

　　 for event in pygame.event.get():

　　 if event.type==pygame.QUIT:

　　 exit()

　　 pygame.time.delay(33)

　　

　　 winSur.blit(bg_suface, (0, 0))

　　

　　 for i in range(len(drops)):

　　 text=random.choice(texts)

　　 winSur.blit(text, (i * FONT_PX, drops[i] * FONT_PX))

　　

　　 drops[i] +=1

　　 if drops[i] * 10 > 480 or random.random() > 0.95:

　　 drops[i]=0

　　

　　 pygame.display.flip()

　　如果说，程序不可用或者出错，那就是因为软件的不同，请谅解！

　　目录

　　画布

　　canvas 属性

　　height 属性

　　width 属性

　　CSS布局

　　Js核心代码

　　设置画布面积

　　字体设置

　　函数实现字体绘制

　　定时器实现动态掉落

　　Html页面

　　效果展示

　　1.你有过这种感觉没有，就是你吃不准自己是醒着还是在做梦

　　2.你执着于耳听为虚，眼见为实，大凡这种人都有大彻大悟的期待，聊可安慰的是，如此就已经离真理不远了。

　　3.信命运吗？尼欧。

　　不信

　　为什么不信？

　　所谓命运，就是指身不由己，我不喜欢这种概念。

　　4.同其他任何人一样，一出世，你就是奴隶，出世就是进监狱，不能去嗅、去尝、去触摸，当一辈子囚犯，一个头脑遭禁锢的囚犯。

　　5.什么叫真？你怎样给真下定义，如果你说真就是你能感觉到的东西，你能闻到的气味，你能尝到的味道，那么这个真就是你大脑作出反应的电子信号。

　　看了上面的语录，只要看过《黑客帝国》（原名《Matrix》）的同学都知道这些。其中电影开头的代码雨，相信大家都非常熟悉。这次就聊一下我做防黑客帝国代码雨的感想。

　　 标签定义图形，比如图表和其他图像。

　　 标签只是图形容器，您必须使用脚本来绘制图形。Canvas 对象表示一个 HTML 画布元素 -。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

　　注意！注意！注意！

　　画布的高度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。

　　画布的宽度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。

　　所以我们要在原生 *** 里面进行画布的设置。

　　尤其注意我在注释写的：//注意700之后的空格，没空格直接加数字。string+int 直接5位数int 因为这块卡了20分钟

　　或者你可以去掉空格试一下（搞事.jpg）

　　这个就不用写了吧

　　最终效果（静态展示）：

　　

　　有兴趣的可以写一个随机颜色demo，很简单。改变RGB就行 哈哈哈

　　随机颜色展示（个人感觉绿色有逼格）