<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#wrapper{
				margin: 0 auto;
				width: 600px;
				height: 400px;
				border: solid magenta 1px;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<canvas id="cas" width="600" height="400"></canvas>
		</div>
		<script type="text/javascript">
		    //拿到画布
			var canvas=document.getElementById('cas');
			//拿到画笔
			var pen = canvas.getContext('2d');
			//笔的颜色
			pen.strokeStyle="#DC143C";
			//画笔起始点
			pen.moveTo(0, 0);
			//画向何处 划线
			pen.lineTo(200,400);
			pen.lineTo(400,0);
			pen.lineTo(600,400);
			//笔的粗细
			pen.lineWidth='2';
			//设置端点
			pen.lineCap="round" //圆形端点
			pen.stroke(); //空心
			// pen.fill();//实心
			//pen.beginPath()//拿起画笔
			//pen.closePath()//闭合画笔
			
			//画矩形
			pen.strokeRect(50,50,200,300);
			//画圆
			// pen.arc(x,y,r,开始角,结束角,方向)
			pen.arc(200,200,100,0,2*Math.PI);
		</script>
	</body>
</html>