6 canvas绘制圆形圆形 - 核心语法 ``` arc(x, y, radius, startAngle, endA

圆形

核心语法

 arc(x, y, radius, startAngle, endAngle, counterclockwise)
     x, y :圆心
     radius: 半径
     startAngle: 开始弧度
     endAngle: 结束弧度
     counterclockwise: 是否允许逆时针绘制, 默认值false
     开始跟结束的单位是弧度, 不是角度
     1弧度 == 180°/π
     JS里的 π 是  Math.PI

代码如下


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>06_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>

		<script type="text/javascript">
			var Canvas = document.getElementById("Canvas");
			
			//1. 设置宽高
			Canvas.width = 1000;
			Canvas.height = 500;
			
			//2. 获取对象上下文对象(核心), 画笔
			var cxt = Canvas.getContext("2d");
			
			cxt.arc(500, 250, 100, 0, 0.5*Math.PI, false);
			cxt.stroke();
		</script>
	</body>
</html>