今天诺亚带来的教程是“流星雨”，快带上你的小伙伴一起来学习吧！
废话不多说
3
2
1
上代码！
<html> <head> <meta charset="utf-8" /> <title>流星雨title> <meta name="keywords" content="关键词，关键字"> <meta name="description" content="描述信息"> <style>body {margin: 0; overflow: hidden;}style> head> <body> <canvas width=400 height=400 style="background:#000000;" id="canvas">canvas> <script>//获取画板//doccument 当前文档//getElement 获取一个标签//ById 通过Id名称的方式//var 声明一片空间//var canvas 声明一片空间的名字叫做canvasvar canvas = document.getElementById("canvas");//获取画板权限 上下文var ctx = canvas.getContext("2d");//让画板的大小等于屏幕的大小/* 思路：1.获取屏幕对象2.获取屏幕的尺寸3.屏幕的尺寸赋值给画板*///获取屏幕对象var s = window.screen;//获取屏幕的宽度和高度var w = s.width;var h = s.height;//设置画板的大小canvas.width = w;canvas.height = h;//设置文字大小 var fontSize = 14;//计算一行有多少个文字 取整数 向下取整var clos = Math.floor(w/fontSize);//思考每一个字的坐标//创建数组把clos 个 0 (y坐标存储起来)var drops = [];var str = "qwertyuiopasdfghjklzxcvbnm";//往数组里面添加 clos 个 0for(var i = 0;i drops.push(0);}//绘制文字function drawString() {//给矩形设置填充色 ctx.fillStyle="rgba(0,0,0,0.05)" //绘制一个矩形 ctx.fillRect(0,0,w,h); //添加文字样式 ctx.font = "600 "+fontSize+"px 微软雅黑"; //设置文字颜色 ctx.fillStyle = "#00ff00"; for(var i = 0;i//x坐标var x = i*fontSize;//y坐标var y = drops[i]*fontSize;//设置绘制文字ctx.fillText(str[Math.floor(Math.random()*str.length)],x,y);if(y>h&&Math.random()>0.99){drops[i] = 0;}drops[i]++; }}//定义一个定时器，每隔30毫秒执行一次setInterval(drawString,30);script> body>html>
以下为代码运行效果
更多编程小技巧请关注“诺亚编程”
