黑客帝国背景
程序员文章站
2023-11-02 18:41:46
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="editplus®">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<title>document</title>
<style>
*{
margin:0;
padding:0;
}
/* #canvas{
display:block;
border:1px solid blue;
margin:100px auto 0;
} */
#canvas{
display:block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canv = document.getelementbyid("canvas"),
ctx = canv.getcontext("2d");
// 1 需要获取整个可视区域的宽高 赋值给canvas画布
// 2 准备26个字母 或者是数字
// 3 设置文字的大小
// 4 一行显示多少个文字 可视区域的宽除以文字的大小
// 5 用数组去记录我们的y坐标
// [0,0,0,0] [1,1,1,1] [2,2,2,2] 不断改变数字的大小 字母的y坐标就不断改变
// 6 需要一个函数去生成字母
var owidth,oheight
function init(){
owidth = window.innerwidth // 1 需要获取整个可视区域的宽高 赋值给canvas画布
oheight = window.innerheight
canv.width = owidth
canv.height = oheight
draw()
}
init()
window.onresize = init;
var otext = "qwertyuiopasdfghjklzxcvbnm", // 2 准备26个字母
ofs = 24 , // 放字体的区域的宽度
onum = math.floor(owidth/ofs), // 4 一行显示多少个文字 可视区域的宽除以文字的大小
oarry = [] ;
for(var i=0; i<onum ; i++){ //让y坐标初始都是0 [0,0,0,0,0...]
oarry.push(0)
}
// 6 需要一个函数去生成字母
function draw(){
ctx.fillstyle = "rgba(0,0,0,0.1)"
ctx.fillrect(0,0,owidth,oheight)
ctx.fillstyle = "green"
//ctx.font = ofs + "px" //画布设置字体的大小
ctx.font = `18px arial`;
//1 知道字母的x坐标跟y坐标
//2 随机生成字母
//3 开始去渲染字母
for(var i=0; i<onum; i++){
var ox = i*ofs, //x坐标
oy = oarry[i]*ofs, //y坐标
orandom = math.floor(math.random()*otext.length) ;//随机一个0-25的数字
ctx.filltext(otext[orandom],ox,oy) //渲染字母
if( oy > oheight && math.random() > 0.95){
oarry[i] = 0
}
oarry[i]++
}
}
setinterval(draw,50) // 每隔50毫秒就执行一次 draw函数
</script>
</body>
</html>
<!--
ctx.moveto(100,100)
ctx.lineto(200,200)
ctx.lineto(200,100)
ctx.lineto(100,100)
//ctx.stroke()
ctx.fillstyle ="green"
ctx.fill()
-->
下一篇： 原生JS实现滚动条