1.用法
在电脑桌面新建一个文本文档,然后将代码复制到文本文档里,再将后缀改为".html"。
DOCTYPE html>
<html>
<head>
<title>黑客帝国代码雨title>
head>
<body>
<canvas id="canvas">canvas>
<style type="text/css">
body{margin: 0; padding: 0; overflow: hidden;}
style>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
var texts = '0123456789#^%^&%^*^&*((*&%'.split('');
var fontSize = 16;
var columns = canvas.width/fontSize;
// 用于计算输出文字时坐标,所以长度即为列数
var drops = [];
//初始值
for(var x = 0; x < columns; x++){
drops[x] = 1;
}
function draw(){
//让背景逐渐由透明到不透明
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
//文字颜色
ctx.fillStyle = '#0F0';
ctx.font = fontSize + 'px arial';
//逐行输出文字
for(var i = 0; i < drops.length; i++){
var text = texts[Math.floor(Math.random()*texts.length)];
ctx.fillText(text, i*fontSize, drops[i]*fontSize);
if(drops[i]*fontSize > canvas.height || Math.random() > 0.95){
drops[i] = 0;
}
drops[i]++;
}
}
setInterval(draw, 33);
script>
body>
html>
版本2
DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="DevenKelly" content="">
<title>黑客帝国代码雨特效-源码title>
<style>
*{padding:0;margin:0}
html{overflow:hidden}
style>
head>
<body>
<canvas id="canvas" style="background:black" width="620" height="340">canvas>
<audio style="display:none; height: 0" id="bg-music" preload="auto" src="music/黑客帝国.mp3">audio>
<style type="text/css">
body{margin: 0; padding: 0; overflow: hidden;}
style>
<script type="text/javascript">
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 drops = [];
//给每一个文字初始化一个起始点的位置
for(var i=0;i<colunms;i++){
drops.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<colunms;i++){
var index = Math.floor(Math.random() * str.length);
var x = i*fontSize;
var y = drops[i] *fontSize;
context.fillText(str[index],x,y);
//如果要改变时间,肯定就是改变每次他的起点
if(y >= canvas.height && Math.random() > 0.92){
drops[i] = 0;
}
drops[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);
};
script>
body>html>
# -*- coding:utf-8 -*-
import random
import pygame
from pygame.locals import *
from sys import exit
PANEL_width = 1920
PANEL_highly = 1080
FONT_PX = 40
pygame.init()
# 创建一个可视窗口, 如果不想全屏运行,可以把 FULLSCREEN 参数去掉
winSur = pygame.display.set_mode((PANEL_width, PANEL_highly), FULLSCREEN, 32)
font = pygame.font.SysFont("SimHei", 35)
bg_suface = pygame.Surface((PANEL_width, PANEL_highly), flags=pygame.SRCALPHA)
pygame.Surface.convert(bg_suface)
bg_suface.fill(pygame.Color(0, 0, 0, 20))
winSur.fill((0, 0, 0))
# 数字版
# texts = [font.render(str(i), True, (0, 255, 0)) for i in range(10)]
# # 二进制版
# letter = ['1', '0', '1', '1', '1', '0', '0', '0', '1', '0', '1', '0', '1', '0', '0', '1', '1', '0', '0', '0', '1', '1'
# ,'1', '0', '1', '0', '0', '1', '0', '1']
# # 汉字版,但看不到字
# letter = ['我', '爱', '你', '我', '爱你', '我爱你', '我非常爱你', '我爱你', '我爱', '我', '爱', '你',
# '我爱你', '爱', '我', '爱你', '我', '我爱', '爱你', '你']
#
# # 字母版
letter = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v'
,'w', 'x', 'y', 'z']
texts = [
font.render(str(letter[i]), True, (0, 255, 0)) for i in range(20)
]
# 按屏幕的宽带计算可以在画板上放几列坐标并生成一个列表
column = int(PANEL_width / FONT_PX)
drops = [0 for i in range(column)]
while True:
# 从队列中获取事件, 如果退出程序, 按两下确认键即可
for event in pygame.event.get():
if event.type == pygame.QUIT:
exit()
elif event.type == pygame.KEYDOWN:
chang = pygame.key.get_pressed()
if (chang[32]):
exit()
# 将暂停一段给定的毫秒数
pygame.time.delay(30)
# 重新编辑图像第二个参数是坐上角坐标
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 > PANEL_highly or random.random() > 0.95:
drops[i] = 0
pygame.display.flip()
数字版
#!/usr/bin/env python3
#-*- coding:UTF-8 -*-
import pygame
import random
from pygame.locals import *
from sys import exit
FONT_PX = 40
pygame.init()
winSur = pygame.display.set_mode((1920, 1080),FULLSCREEN,32)
font = pygame.font.SysFont('fangsong', 20)
bg_suface = pygame.Surface((1920, 1080), 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(1920 / 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 > 600 or random.random() > 0.95:
drops[i] = 0
pygame.display.flip()
字母版
#!/usr/bin/env python3
#-*- coding:UTF-8 -*-
import pygame
import random
PANEL_width = 1920
PANEL_highly = 1080
FONT_PX = 40
pygame.init()
# 创建一个窗口
winSur = pygame.display.set_mode((PANEL_width, PANEL_highly))
font = pygame.font.SysFont('123.ttf', 22)
bg_suface = pygame.Surface((PANEL_width, PANEL_highly), flags=pygame.SRCALPHA)
pygame.Surface.convert(bg_suface)
bg_suface.fill(pygame.Color(0, 0, 0, 28))
winSur.fill((0, 0, 0))
letter = ['I love you', 'Je t‘aime', 'c', 'd', 'e', 'f', 'u', 'i', 'WO ai NI', 'p', 'a', '520', 'd', 'f', '1314', 'h', 'j', 'k', 'l', 'z', 'x', 'c',
'v', 'b', 'n', 'm']
texts = [
font.render(str(letter[i]), True, (0, 255, 0)) for i in range(26)
]
# 按窗口的宽度来计算可以在画板上放几列坐标并生成一个列表
column = int(PANEL_width / FONT_PX)
drops = [0 for i in range(column)]
while True:
# 从队列中获取事件
for event in pygame.event.get():
if event.type == pygame.QUIT:
exit()
elif event.type == pygame.KEYDOWN:
chang = pygame.key.get_pressed()
if (chang[32]):
exit()
# 暂停给定的毫秒数
pygame.time.delay(30)
# 重新编辑图像
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 > PANEL_highly or random.random() > 0.95:
drops[i] = 0
pygame.display.flip()