绘制圆弧

上一节我们学习了利用 arc 绘制标准的圆或者圆弧，arc 依托于圆心、半径、起始角和结束角绘制圆弧，今天我们再来学习一下绘制圆弧的 arcTo。

arcTo() 是利用两条相交切线来确定圆弧的位置，开始前我们先要搞懂切线的几个知识点。

如何确定切线？
我们都知道两点确定一条直线，这里两条直线相交处有交点，交点是两条线共用的点，所以我们只需要三个点就能确定两条切线。

根据切线如何确定圆心？
切线的性质有：
(1)切线和圆只有公共点。
(2)切线和圆心的距离等于圆的半径。
(3)切线垂直于经过切点的半径。
(4)经过圆心垂直于切线的直线必过切点。
(5)经过切点垂直于切线的直线必过圆心。

我们根据切线的垂直线必过圆心，即可确定圆心。

我们来看一张：

上图中，只要我们确定了 PA、PB 这两条切线和圆的半径 OA，即可确定 AB 这条弧线。上图中，我们沿着 OP 延长线移动 O 点的位置，即可得到半径不同的圆，也就得到了不同的 AB 弧线。

到这里我们明白了：

arcTo 就是利用上面的原理来绘制弧线的。arcTo 有5个参数，前两个参数表示的是上图中 P 点的坐标，也就是切线的交点，第3个和第4个参数表示 PB 切线上的任意坐标点，第5个参数表示的是上图中 OA 的长度，也就是绘制圆的半径。

特别注意：
第3、4个参数表示的点不是切点！
第3、4个参数表示的点不是切点！
第3、4个参数表示的点不是切点！

arcTo 的参数中只有两个点和半径，我们前面讲到要绘制弧线，必须是三个点，那第点哪儿去了呢？其实第点就是当前画布中笔触所在的位置，也就是当前画布中已经绘制的路径的终点。

先看整体案例：

<!DOCTYPE html>
<html>
<head>
	< charset="utf-8">
	<title>网Wiki</title>
    <style>
        #imooc{
            border:px solid #ccc;
        }
    </style>
</head>
<body>
	
	<canvas id="imooc">您的浏览器 HTML5 canvas </canvas>
	
	<script>
		const canvas = document.getElementById('imooc');
		canvas.width=
		canvas.height=
		const ctx = canvas.getContext('2d');
		
		// 绘制弧线
		ctx.beginPath();
		ctx.moveTo(,);
		ctx.arcTo(,, ,, );  //了绘制圆的
		ctx.Style = "#456795";
		ctx.lineWidth = ;
		ctx.();
		
		// ==============一下为复制=================
		// 绘制切线
		ctx.beginPath()
		ctx.Style="#ccc";
		ctx.lineWidth=;
		ctx.moveTo(,);
		ctx.lineTo(,);
		ctx.lineTo(,);
		ctx.();
		
		//绘制P点
		ctx.beginPath();
		ctx.arc(,,,, *Math.PI)
		ctx.fillStyle = "#000"
		ctx.fill()
		
		//绘制A点
		ctx.beginPath();
		ctx.arc(,,,, *Math.PI)
		ctx.fillStyle = "#000"
		ctx.fill()
		
		
		//绘制B点
		ctx.beginPath();
		ctx.arc(,,,, *Math.PI)
		ctx.fillStyle = "#000"
		ctx.fill()
		
		//绘制切点
		ctx.beginPath();
		ctx.arc(,,,, *Math.PI)
		ctx.fillStyle = "yellow"
		ctx.fill()
		
		
		//绘制切点
		ctx.beginPath();
		ctx.arc(,,,, *Math.PI)
		ctx.fillStyle = "yellow"
		ctx.fill()
		
		//绘制圆心 O 点
		ctx.beginPath();
		ctx.arc(,,,, *Math.PI)
		ctx.fillStyle = "blue"
		ctx.fill()
		
		//绘制辅助圆
		ctx.beginPath();
		ctx.lineWidth = ;
		ctx.Style="#ccc"
		ctx.arc(,,,, *Math.PI)
		ctx.()
		
	</script>
</body>
</html>

运行结果：

我们对上面的绘制弧线做拆分讲解：

开始新路径。

ctx.beginPath();

确定第坐标点 A 点，A 点是当前已有路径的终点。

ctx.moveTo(40,40);

我换写法：

ctx.moveTo(40,0);
ctx.lineTo(80,40);

这时候 A 点的位置就变成了 (80, 40)。

根据切线交点、第二条切线上的某个点和半径开始绘制弧线。

ctx.arcTo(260,40, 260,200, 60);  //了绘制圆的

这里需要注意三点：
(1) A 点和 PA 切线的切点会被起来，但是 PB 切线上的切点和 B点不会起来。

(2) A 点肯定在路径上，B 点不一定在路径上。
(3) 切点由 canvas 计算。

设置绘制样式以及开始描边。

ctx.Style = "#456795";
ctx.lineWidth = 4;
ctx.();

我们从案例中可以看到，绘制圆形路径只需要即可，arc 和我们之前学过的 rect 绘制矩形的类似，也是绘制了路径，我们后续对路径的描边或者填充依然是需要或者 fill 的。

直接看案例：

<!DOCTYPE html>
<html>
<head>
	< charset="utf-8">
	<title>网Wiki</title>
    <style>
        #imooc{
            border:px solid #ccc;
        }
    </style>
</head>
<body>
	
	<canvas id="imooc">您的浏览器 HTML5 canvas </canvas>
	
	<script>
		const canvas = document.getElementById('imooc');
		canvas.width=
		canvas.height=
		const ctx = canvas.getContext('2d');
		
		// 绘制圆角矩形
		ctx.beginPath();
		ctx.moveTo(,);
		ctx.arcTo(,, ,, );
		ctx.arcTo(,, ,, ); 
		ctx.arcTo(,, ,, ); 
		ctx.arcTo(,, ,,)
	
		ctx.Style = "#456795";
		ctx.lineWidth = ;
		ctx.();
		ctx.fillStyle = "#ccc";
		ctx.fill();
	</script>
</body>
</html>

运行结果：

相同点：

不同点：

本小节中我们使用到新的绘制圆弧的 arcTo。

arcTo 作用是绘制切线为 PA 和 PB、半径为 r 的圆弧，圆弧由切线控制。

变量说明：

本小节我们主要学习了利用 arcTo 绘制圆弧，本节主要难点在于理解绘制的原理，希望同学们多多练习加深记忆。

←绘制圆

绘制椭圆→

绘制圆弧

您的鼓励是对我最大的支持