根据H5的Canvas特性，绘制代码雨

程序员文章站 2022-05-30 09:26:02

...

手把手教你变 大神 . ????

根据H5的Canvas特性，绘制代码雨

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
		</style>
	</head>

	<body>
		<!-- 
			 1 什么是canvas？
			 俗称：画布
			 是html5新增的一个H5的标签
			 2 canvas能用在哪些方面？
			 游戏 广告  图形 图表 特效和艺术设计
			 3 如何去写canvas代码？
			 canvas是一个标签 基于JS去实现的（依赖于js）
		 -->
		 <!-- <canvas width="100%" height="100%" id="canvas"></canvas>
		 <script type="text/javascript">
			// 纸
			var canvas = document.getElementById("canvas");
			// 确定纸张的大小
			canvas.width = 500;
			canvas.height = 1000;
			// 笔
			var context = canvas.getContext('2d');
			// 开始绘画
			context.beginPath();
			
			// 绘制过程
			
			// 绘制矩形
			// 确定画笔的颜色
			context.fillStyle = 'cornflowerblue';
			// fillRect方法有四个参数
			// 矩形左上角x坐标,矩形左上角y轴的坐标,矩形宽度,矩形高度
			context.fillRect(200,200,100,50);
			
			// 绘制文字(颜色，字号，字体，字的内容)
			context.fillStyle = 'green';
			context.font = '30px 楷体';
			// fillText方法
			// 字体内容,字体的x轴坐标,字体的y轴坐标
			context.fillText('一只鹅',200,200);
			
			// 结束绘画
			context.closePath(); 
		 </script>
		<!--1、显示黑色背景、显示绿色文字
			2、文字在一列中动起来
			3、文字在多列中动起来
			4、完成代码雨
		-->
		<canvas id="canvas"></canvas>
	</body>
	<script type="text/javascript">
		//1.获取画布
		var canvas = document.getElementById("canvas");
		//2.确定我们画布的大小
		var width = window.innerWidth; //获取页面文档显示区域的宽度
		var height = window.innerHeight; //获取页面文档显示区域的高度
		canvas.width = width;
		canvas.height = height;
		//3.获取画笔
		var context = canvas.getContext("2d");
		//4.开始画图
		context.beginPath();
		var y = 0;
		var x = 0;
		var fontsize = 16;
		var row = width / fontsize;
		var arr = [];//控制 y的值
		var str = "我abcdefghijklmnopqrstuvwxyz爱1234567890你";
		for(var i = 0;i <= row;i++){
			arr.push(0)
		}
		var dorw = function() {
			//第一步：绘制黑色背景和绿色文字
			context.fillStyle = "rgba(0,0,0,0.05)";
			context.fillRect(0, 0, width, height);
			//第二步：绘制绿色的文字
			for(var i = 0; i <= row; i++) {
				x = i*fontsize;
				y = arr[i]*fontsize;
				//选取字符串中的某一个字符
				var index =Math.floor(Math.random()*str.length); 
				context.fillStyle = "greenyellow";
				context.font = "16px 楷体";
				context.fillText(str[index], x, y);
				if(y > height&&Math.random()>0.99) {
					arr[i] = 0;
				}
				arr[i]++;
			}

		
		}
		//第三步：文字开始移动
		//自增量  定时器（循环的执行某一个方法）
		//两个参数 第一个参数（存放要反复执行的函数名） 
		//第二个参数（每隔多长时间执行一次该函数）单位是毫秒
		setInterval(dorw, 30);
		//5.结束画图
		context.closePath();
	</script>

</html>