<!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()
-->
