html写流星雨（完整代码）_html写流星雨(完整代码)-程序员宅基地

码仙励志

人生不可能总是顺心如意，但持续朝着阳光走，影子就会躲在后面，刺眼，却是对的方向

<!doctype html>
<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>画布 画板 画画的本子
		-->
		<canvas width=400 height=400 style="background:#000000;" id="canvas"></canvas>

		<!--
			javascript
			画笔
		--> 
		<script>
					
			//获取画板
			//doccument 当前文档
			//getElement 获取一个标签
			//ById 通过Id名称的方式
			//var 声明一片空间
			//var canvas 声明一片空间的名字叫做canvas
			var 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 个 0
			for(var i = 0;i<clos;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<clos;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>

运行效果截图：

有很多人都给我留言说写不出来，最后经过我的排查都是抄代码抄错了，所以我这里给大家一个直接下载的地址，微信搜索公众号码海无际或扫描左侧二维码回复c024获取

本篇博客来自于潭州教育视频教程的总结以及笔记的整理，仅供学习交流，切勿用于商业用途，如有侵权，请联系博主删除，博主QQ：194760901

本文链接：https://blog.csdn.net/tswc_byy/article/details/81609845

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

AVFrame&AVPacket_天天av-程序员宅基地

文章浏览阅读1.5w次。AVFrame：（ This structure describes decoded (raw) audio or video data. AVFrame must be allocated using av_frame_alloc(). Note that this only allocates the AVFrame itself, the buffers for the data mus_天天av

Java经典例题07：用100元人民币兑换10元、5元、1元的纸币_编程把100元换成1元5元10元-程序员宅基地

文章浏览阅读3.5k次，点赞2次，收藏12次。解题思路分析：1.100元兑换10元纸币，可以兑换10张，但每种纸币都要有，所以最多只能兑换9张，最少兑换1张。则初始值为1；循环条件小于10或者小于等于9。2.100元兑换5元纸币，可以兑换20，但每种纸币都要有，所以最多只能兑换19张，最少兑换1张。初始值为1；循环条件小于20或者小于等于19。3.100元兑换1元纸币，可以兑换100张，但每种纸币都要有，所以最多只能兑换99张，最少兑换1张。则初始值为1；循环条件小于100或者小于等于99。_编程把100元换成1元5元10元

猜三次年龄_找人猜三次年龄-程序员宅基地

文章浏览阅读450次。1、允许用户最多尝试三次2、每尝试三次后，如果还没猜对，就问用户是否继续玩，如果回答Y，y，就继续猜三次，以此往复，如果回答N，n，就直接退出times=0count=3while times<=3:age=int(input(‘请输入年龄：’))if age == 18:print(‘猜对了’)breakelif age > 18:print(‘猜大了’)else:print(‘猜小了’)times+=1if times3:choose = input(‘继续猜Y_找人猜三次年龄

SDOI2017 Round2 详细题解-程序员宅基地

文章浏览阅读152次。这套题实在是太神仙了。。做了我好久。。。好多题都是去搜题解才会的 TAT。剩的那道题先咕着，如果省选没有退役就来填吧。「SDOI2017」龙与地下城题意丢 \(Y\) 次骰子，骰子有 \(X\) 面，每一面的概率均等，取值为 \([0, X)\) ，问最后取值在 \([a, b]\) 之间的概率。一个浮点数，绝对误差不超过 \(0.013579\) 为正确。数据范围每组数据有 \...

嵌入式数据库-Sqlite3-程序员宅基地

文章浏览阅读1.1k次，点赞36次，收藏25次。阅读引言：本文将会从环境sqlite3的安装、数据库的基础知识、sqlite3命令、以及sqlite的sql语句最后还有一个完整的代码实例，相信仔细学习完这篇内容之后大家一定能有所收获。

C++ Builder编写WinForm从Web服务器下载文件-程序员宅基地

文章浏览阅读51次。UnicodeString templateSavePath = ChangeFileExt(ExtractFilePath(Application->ExeName),"tmp.doc");IdAntiFreeze1->OnlyWhenIdle = false;//设置使程序有反应.TMemoryStream *templateStream ;templateStre..._c++webserver下载文件