Created
October 19, 2022 06:41
-
-
Save chenshaoju/3bd5beede3e3955390476d4329778764 to your computer and use it in GitHub Desktop.
Web Matrix demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
<html xmlns="http://www.w3.org/1999/xhtml"> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
<title>Matrix</title> | |
<style type="text/css"> | |
* { | |
margin: 0; | |
padding: 0; | |
} | |
body { | |
background: black; | |
} | |
canvas { | |
display: block; | |
} | |
BODY.enterPage{ | |
cursor:hand; | |
} | |
</style> | |
</head> | |
<body class="enterPage" onclick="goto();"> | |
<canvas id="c"></canvas> | |
<script type="text/javascript"> | |
var c = document.getElementById("c"); | |
var ctx = c.getContext("2d"); | |
c.height = window.innerHeight; | |
c.width = window.innerWidth; | |
var chinese = "王旁青头戋五一土士二干十寸雨大犬三羊古石厂木丁西工戈草头右框七目具上止卜虎皮日早两竖与虫依口与川字根稀田甲方框四车力山由贝下框几禾竹一撇双人立反文条头共三一白手看头三二斤月衫乃用家衣底人和八三四里金勺缺点无尾鱼犬旁留乂儿一点夕氏无七言文方广在四一高头一捺谁人去立辛两点六门病水旁兴头小倒立火业头四点米之宝盖摘示衣已半巳满不出己左框折尸心和羽子耳了也框向上女刀九臼山朝西又巴马丢矢矣慈母无心弓和匕幼无力"; | |
chinese = chinese.split(""); | |
var font_size = 10; | |
var columns = c.width / font_size; //number of columns for the rain | |
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, c.width, c.height); | |
ctx.fillStyle = "#0F0"; //green text | |
ctx.font = font_size + "px arial"; | |
for (var i = 0; i < drops.length; i++) { | |
var text = chinese[Math.floor(Math.random() * chinese.length)]; | |
ctx.fillText(text, i * font_size, drops[i] * font_size); | |
if (drops[i] * font_size > c.height && Math.random() > 0.975) drops[i] = 0; | |
drops[i]++; | |
} | |
} | |
setInterval(draw, 50); | |
function goto(){ | |
location.href = "https://www.chenshaoju.cn" | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment