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

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

智能推荐

学计算机每天都没时间,大学里“苦不堪言”的5大专业，忙到没有时间谈恋爱，学生累成狗...-程序员宅基地

文章浏览阅读301次。五月已经悄悄地过去了一半，高中生们也即将迎来改变命运的高考。在高中时代，无论是家长还是老师，都会以过来人的身份告诉高中生们：熬过这三年，上了大学就轻松了。很多高中生对此深信不疑，而且对大学的生活无比憧憬和向往，并且已经开始选择自己心仪的城市和院校了。然而万万没有想到的是，上了大学以后，不同专业的学生却是过着截然不同的生活。艺术生到处写生找灵感，师范生忙着领略教师的风采，医学生却是忙着奔走于教室和图..._计算机专业的大学生每天有多累

java分布式集群项目_Java企业级电商项目实战 Tomcat集群与Redis分布式-程序员宅基地

文章浏览阅读130次。本套课程包含：java电商项目实战课程 Tomcat集群视频教程 Redis项目实战课程课程目录1-1 课程导学1-2 大型Java项目架构演进解析1-3 一期课程与问答服务回顾1-4 一期项目结构和代码回顾1-5 课程使用系统及技术版本介绍(一期+二期)1-6 二期项目初始化第2章 Lombok框架集成及原理解析本章会对Lombok框架进行介绍，同时会讲解Lombok的原理。并手把手领着小伙伴们..._java redis集群企业级

c语言实验函数调用程序设计,C语言实验四实验报告——函数-程序员宅基地

文章浏览阅读841次。南昌大学c语言考试一、实验项目名称函数二、实验目的1．掌握C函数的定义方法、函数的调用方法、参数说明以及返回值。掌握实参与形参的对应关系以及参数之间的“值传递”的方式；掌握函数的嵌套调用及递归调用的设计方法；2．掌握全局变量和局部变量、动态变量与静态变量的概念和使用方法；3．在编程过程中加深理解函数调用的程序设计思想。三、实验内容1．多模块的程序设计与调试的方法；2．函数的定义和调用的方法；3..._函数调用程序设计实验结论怎么写

C4D笔记（no.1）_c4d柔和选择-程序员宅基地

文章浏览阅读2.9k次，点赞4次，收藏21次。文章目录1、xxx2课、视窗的操作2.1、右上角视窗多种：提供不同功能2.2、视图相关2.2.1、视图的操作：2.2.2、前、上、右视图切换2.2.3、双视图设置（默认4视图）2.3、自动保存2.4、自定义面板与快捷键2.4.1、自定义面板：2.4.2、增加按钮2.4.3、删除按钮2.4.4、新建面板2.5 网格（地面）、全屏模式2.5.1 网格（地面）2.5.2 全屏模式3课、模型相关3.1模型显示方式3.2 模型最大显示3.3 后退与前进（后撤与重做）3.4 选择3.4.1 实时选择（快捷键 “9”）3_c4d柔和选择

在线画图工具-流程图、思维导图、原型图等-程序员宅基地

文章浏览阅读308次。pixso是用于软件原型设计的一款工具，类似于Axure和figma等等，里面社区中同样有大量模板，并且含有较为丰富的插件，但是还在开发中，功能还未完善，比如还不支持在线交互，对于一般的UI设计是足够用的，相比于需要付费的Axure，是较好的一个选择，目前公司中大部分还是选择使用功能完善的Axure。国内的一款画图工具，同样是适合画流程图、思维导图等常规图片，可以协作，优点是其中的社区包含大量模板可以使用，但是不太推荐，因为不开会员的话只能创建3个文件，而且导出高清图片照样需要会员。

【雕爷学编程】MicroPython手册之 ESP8266 硬件SPI总线_8266 spi-程序员宅基地

文章浏览阅读321次，点赞2次，收藏2次。不同的ESP8266芯片或模块可能有不同的参数，因此在使用或购买时，需要注意选择合适的型号和版本。通过设置SPI通信参数和片选引脚，然后在循环中选择设备（通过片选引脚），发送数据并接收对应的数据，将接收到的数据打印出来。1、尺寸：ESP8266芯片的尺寸为5x5 mm，ESP8266模块的尺寸根据外围电路和天线的不同而有所差异，一般在10x15 mm到25x50 mm之间。SPI 总线的通信过程需要遵循一定的协议和顺序，如先发送 SS 信号选择从机，再发送或接收数据，最后取消 SS 信号释放总线。_8266 spi