前端路线--H5篇（day05）_线路 h5-CSDN博客

本文链接：https://blog.csdn.net/Yan9_9/article/details/123368143

移动端布局概念

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
			布局视口:屏幕小，盒子宽，出现滚动条
			js获取:  document.body.clientWidth
			
			视觉视口：人眼睛看屏幕的大小
			js获取:window.innerWidth
			
			理想视口:
			布局视口=视觉视口
			js获取:window.screen.width
			
			设备像素比
			DPR=物理像素/独立（CSS）像素
			js获取:window.devicePixelRatio
			
			rem单位:相对于html元素的字体大小
			
		 -->
	</body>
</html>

canvas画布

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#mycanvas{
				border: solid 1px orange;
			}
		</style>
	</head>
	<body>
		<canvas id="mycanvas" width="800" height="600"></canvas>
		<script type="text/javascript">
			//获取canvas对象
			var mycanvas=document.querySelector('#mycanvas');
			//获取上下文对象--画笔
			var pencil=mycanvas.getContext("2d");
			//开始
			pencil.beginPath();
			//画笔移动到坐标
			pencil.moveTo(100,100);
			//绘制线条
			pencil.lineTo(200,300);
			//结束位置
			pencil.closePath();
			/* 
			**beginPath:**
			核心的作用是将不同绘制的形状进行隔离，每次执行此方法，表示重新绘制一个路径，跟之前的绘制的墨迹可以进行分开样式设置和管理。
			**closePath:**
			如果需要闭合，必须写在stroke()之前，才会起作用。
			 */
			
			//设置画笔颜色
			pencil.strokeStyle='#FFA500';
			//设置画笔粗细  不加单位
			pencil.lineWidth='5'
			
			//绘制
			pencil.stroke();
			
		</script>
	</body>
</html>

画矩形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#myCanvas{
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas" width="800" height="600"></canvas>
	</body>
	<script type="text/javascript">
		var myCanvas=document.querySelector('#myCanvas');
		var pencile=myCanvas.getContext("2d");
		// pencile.rect(x,y,width,height);  快速画矩形
		// x,y:起始坐标   width,height:宽高，默认为px为单位
		
		//pencile.strokeRect(x,y,width,height);  描边矩形  不支持填充
		
		// pencile.fillRect(x,y,width,height);	 填充矩形
		pencile.beginPath()
		// pencile.rect(100,200,500,350);
		// pencile.strokeRect(100,200,500,350);
		// pencile.fillRect(100,200,500,350);
		pencile.closePath();
		pencile.stroke();
		
		
	</script>
</html>

绘制圆弧

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#myCanvas{
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas" width="800" height="600"></canvas>
	</body>
	<script type="text/javascript">
		var myCanvas=document.querySelector('#myCanvas');
		var pencile=myCanvas.getContext("2d");
		// arc(x,y,r,起始弧度,180*Math.PI/180(结尾弧度),是否逆时针);
		//x,y起始位置   r半径   
		//是否逆时针:true/false(默认)
		pencile.beginPath()
		pencile.arc(300,100,200,0,180*Math.PI/180,false);
		pencile.closePath();
		pencile.stroke();
		
		
	</script>
</html>

绘制文字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#myCanvas{
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas" width="800" height="600"></canvas>
	</body>
	<script type="text/javascript">
		var myCanvas=document.querySelector('#myCanvas');
		var pencile=myCanvas.getContext("2d");
		//绘制文字
		// pencile.fillText('文本',x,y);
		// x,y  填充坐标
		
		
		/* 文本样式
		 .font="大小  字体";
			  ='font-style  font-weight  font-size'
		 
		 文本对齐
		 pencile.textAlign='start';
		 start  默认
		 end	文本以指定位置结束
		 left	文本左对齐指定位置
		 right	文本右对齐指定位置
		 center	文本的中心位置被放置在指定位置
		 
		 基线对齐：
		 pencile.textBaseline='top'; 
		 top				 文本基线在文本块顶部
		 hanging			 文本基线是悬挂基线
		 middle				 文本基线是文本块中间
		 alphabetic			 文本基线是标准的字母基线
		 ideographic		 文本基线是表意字基线
		 bottom				 文本基线是文本块底部
		 
		 文本方向
		 pencile.direction='rtl';
							ltr  //left to right
							rtl	 //right to left
							inhrerit  //默认
		 */
		pencile.beginPath()
		// pencile.font="50px serif";//应该放在fiillText()的上面
		// pencile.textAlign='start';
		// pencile.textBaseline='top';
		// pencile.direction='rtl';
		pencile.fillText('hello',220,200);
		pencile.closePath();
		pencile.stroke();
		
		
	</script>
</html>

案例–画饼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			canvas{
				border: 1px solid orange;
			}
		</style>
	</head>
	<body>
		<canvas id="box" width="800" height="700"></canvas>
	</body>
	<script type="text/javascript">
		var canvans = document.getElementById("box");
		var cxt = canvans.getContext("2d");
		
		var data = [{
		    value: 0.1,
		    msg: '8000以下',
		    color: 'gray'
		}, {
		    value: 0.4,
		    msg: '10000以上',
		    color: 'red'
		}, {
		    value: 0.4,
		    msg: '8000-9000',
		    color: 'orange'
		}, {
		    value: 0.1,
		    msg: '9000-10000',
		    color: 'blue'
		}];
		
		var startDeg=0;
		var endDeg=0;
		for(var i=0;i<data.length;i++){
			//度数的转换0.1*360
			endDeg=startDeg+data[i].value*360;
			cxt.beginPath();
			cxt.moveTo(200,200);//画笔的起始点
			cxt.arc(200,200,200,startDeg*Math.PI/180,endDeg*Math.PI/180);
			cxt.fillStyle=data[i].color;
			cxt.fill();
			cxt.closePath();
			cxt.stroke();
			startDeg=endDeg;//让每次的起始值等于上一个的结尾值
			
		}
	</script>
</html>

绘制图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#myCanvas{
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<img src="img/300X70-01%5B1%5D.gif"  id="image">
		<canvas id="myCanvas" width="800" height="600"></canvas>
	</body>
	<script type="text/javascript">
		var images=document.querySelector('img');
		var myCanvas=document.querySelector('#myCanvas');
		var pencile=myCanvas.getContext("2d");
		
		pencile.beginPath()
		pencile.drawImage(images,100,100,200,200);	
		pencile.closePath();
		pencile.stroke();
		
		/* 
			pencile.drawImage(images对象,x,y,width,height);	
			x,y:画布坐标
			width,height:画布的宽高
			
			截取图片
			pencile.drawImage(images对象,sx,sy,swidth,sheight,x,y,width,height);
			sx,sy:截取的起始坐标x,y
			swidth,sheight:截取的图片饿的宽和高
			x,y:画布坐标
			width,height:画布的宽高
		 */
		
	</script>
</html>