<!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() –>
黄山市民网：https://www.huangshanshimin.com/
