2 canvas 绘制直线canvas 绘制直线草稿箱 ```js <!DOCTYPE html> <html> <h

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>02_Canvas绘制直线</title>
		<style type="text/css">
			#Canvas {
				border: 1px solid red;
				display: block;
				margin: 50px auto;
			}
		</style>
	</head>
	<body>
		<canvas id="Canvas" width="1000" height="500">请升级浏览器</canvas>
		<!--在设置canvas画布的大小时, 建议使用属性的方式设置. 
                不要使用样式, 如果使用样式设置, 在某些浏览器里, 图像会变形-->
		<script type="text/javascript">
			var Canvas = document.getElementById("Canvas");
			
			//1. 设置宽高
			Canvas.width = 1000;
			Canvas.height = 500;
			
			//2. 获取对象上下文对象(核心), 画笔
			var context = Canvas.getContext("2d");
//			
//			//3. 绘制路径(直线)
//			context.beginPath(); //开始路径
//			context.moveTo(100, 100); // 设置起点
//			context.lineTo(500, 200);  // 设置下一个点
//			context.closePath(); //结束路径
			
//			context.stroke() //绘制路径

			context.beginPath();
			
			context.moveTo(200, 200);
			context.lineTo(100, 50);
			context.lineTo(100, 400);
			context.lineTo(400, 70);
			context.closePath();
			
			context.moveTo(20, 20);
			context.lineTo(10, 5);
			context.lineTo(10, 40);
			context.lineTo(40, 7);
			context.closePath();
			
			
			context.stroke();
		</script>
	</body>
</html>

`