绘制圆弧
上一节我们学习了利用 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
绘制圆弧,本节主要难点在于理解绘制的原理,希望同学们多多练习加深记忆。