标签：random and 存储 meta 名称 文字 尺寸 定时 实现
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>流星雨</title> 6 <meta name="keywords" content="关键词，关键字"> 7 <meta name="description" content="描述信息"> 8 <style> 9 body { 10 margin: 0; 11 overflow: hidden; 12 } 13 </style> 14 </head> 15 16 <body> 17 18 <!-- 19 <canvas>画布 画板 画画的本子 20 --> 21 <canvas width=400 height=400 style="background:#000000;" id="canvas"></canvas> 22 23 <!-- 24 javascript 25 画笔 26 --> 27 <script> 28 29 //获取画板 30 //doccument 当前文档 31 //getElement 获取一个标签 32 //ById 通过Id名称的方式 33 //var 声明一片空间 34 //var canvas 声明一片空间的名字叫做canvas 35 var canvas = document.getElementById("canvas"); 36 //获取画板权限 上下文 37 var ctx = canvas.getContext("2d"); 38 //让画板的大小等于屏幕的大小 39 /* 40 思路： 41 1.获取屏幕对象 42 2.获取屏幕的尺寸 43 3.屏幕的尺寸赋值给画板 44 */ 45 //获取屏幕对象 46 var s = window.screen; 47 //获取屏幕的宽度和高度 48 var w = s.width; 49 var h = s.height; 50 //设置画板的大小 51 canvas.width = w; 52 canvas.height = h; 53 54 //设置文字大小 55 var fontSize = 14; 56 //计算一行有多少个文字 取整数 向下取整 57 var clos = Math.floor(w/fontSize); 58 //思考每一个字的坐标 59 //创建数组把clos 个 0 （y坐标存储起来） 60 var drops = []; 61 var str = "qwertyuiopasdfghjklzxcvbnm"; 62 //往数组里面添加 clos 个 0 63 for(var i = 0;i<clos;i++) { 64 drops.push(0); 65 } 66 67 //绘制文字 68 function drawString() { 69 //给矩形设置填充色 70 ctx.fillStyle="rgba(0,0,0,0.05)" 71 //绘制一个矩形 72 ctx.fillRect(0,0,w,h); 73 74 //添加文字样式 75 ctx.font = "600 "+fontSize+"px 微软雅黑"; 76 //设置文字颜色 77 ctx.fillStyle = "#00ff00"; 78 79 for(var i = 0;i<clos;i++) { 80 //x坐标 81 var x = i*fontSize; 82 //y坐标 83 var y = drops[i]*fontSize; 84 //设置绘制文字 85 ctx.fillText(str[Math.floor(Math.random()*str.length)],x,y); 86 if(y>h&&Math.random()>0.99){ 87 drops[i] = 0; 88 } 89 drops[i]++; 90 } 91 92 } 93 //定义一个定时器，每隔30毫秒执行一次 94 setInterval(drawString,30); 95 </script> 96 </body> 97 </html>
标签：random and 存储 meta 名称 文字 尺寸 定时 实现
原文地址：https://www.cnblogs.com/CoderKobe/p/10043969.html
