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 javascript25 画笔26 --> 27 <script>28 29 //获取画板30 //doccument 当前文档31 //getElement 获取一个标签32 //ById 通过Id名称的方式33 //var 声明一片空间34 //var canvas 声明一片空间的名字叫做canvas35 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 个 063 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>HTML实现流星雨效果
原文地址：https://www.cnblogs.com/CoderKobe/p/10043969.html