3 canvas 绘制图形<!DOCTYPE html> <html> <head> <meta charset="UT

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>03_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(200, 100);
			context.lineTo(200, 200);
			context.lineTo(100, 200);
			
			context.closePath();
			context.stroke();
			
			// 绘制三角形
			context.beginPath();
			context.moveTo(300, 100);
			context.lineTo(300, 300);
			context.lineTo(500, 300);
			context.closePath();
			context.stroke();
			
			//绘制五角星
			context.beginPath();
			context.moveTo(700, 100);
			context.lineTo(600, 300);
			context.lineTo(900, 200);
			context.lineTo(500, 200);
			context.lineTo(900, 300);
			context.closePath();
			context.stroke();
		</script>
	</body>
</html>