论坛 › 马黑黑教程专版 › 在画布中使用二次贝塞尔曲线

马黑黑 发表于 2022-8-22 12:24

在画布中使用二次贝塞尔曲线

本帖最后由 马黑黑 于 2022-8-22 17:13 编辑 <br /><br /><p>在画布中使用二次贝塞尔曲线 | 马黑黑</p>
<p><br></p>
<p>贝塞尔曲线广泛应用于流水线形设计，我们在任何一辆现代轿车上都能看到它的身影。贝塞尔曲线在ps等作图工具中也发挥着不可缺少的作用，如钢笔即是。在HTML的世界里，贝塞尔曲线同样拥有施展的天地，像SVG、canvas画布等，都可以是赛贝尔曲线大显身手的舞台。</p>
<p><br></p>
<p>那么，什么是贝塞尔曲线？贝塞尔曲线是一条流水形态一样的平滑或光滑的曲线，它分为多种：第一种，数学上称为一次方贝塞尔曲线，这个其实就是一根直线，所以又叫线性贝塞尔曲线（但它根本就不是曲线）；第二种，二次方贝塞尔曲线，这是我们今天要讨论的，简称二次贝赛尔曲线，它由三个点共同控制而成，其中两个点是起始点和结束点，另一个点是控制点（也叫拉扯点）。前两个点在曲线上（头尾），后一个点即控制点不在线上（如下图所示），它在先外某一点拉扯（控制）曲线的弯曲程度（曲率）；第三种，三次贝塞尔曲线，由起始点、两个控制点、结束点共同作用而成；其他，多次贝塞尔曲线，无非就是控制点多了一些而已，可以视为是三次贝塞尔曲线的扩展。</p>
<p><br><br></p>
<p><br>（图一：二次贝塞尔曲线）</p>
<p><br></p>
<p>在画布上绘制二次赛贝尔曲线，需要一个绘制指令（ctx 是画笔操作句柄）：</p>
<p><br></p>
<p>ctx.quadraticCurveTo(cpx,cpy,x,y);</p>
<p><br></p>
<p>quadraticCurveTo()需要四个参数，其实是两对参数：cpx 和 cpy 是一对，cp是控制点的意思，两个参数表明是曲线外控制点（拉扯点）的xy坐标；xy是一对，指结束点的xy坐标。嗯？起始点去哪儿了？起始点是画笔（ctx）绘制曲线前 moveTo 的那个点，如果没有 moveTo指令，默认是上一个绘制路径的结束点。</p>
<p><br></p>
<p>还是通过实例来理解 quadraticCurveTo() 指令如何绘制二次贝塞尔曲线，我们就绘制上图所以的那根曲线：</p>

<pre>

&lt;<span style='color:darkred'>canvas</span> <span style='color: red'>id</span><span style='color: blue'>=</span><span style='color: magenta'>"canv"</span> <span style='color: red'>width</span><span style='color: blue'>=</span><span style='color: magenta'>"600"</span> <span style='color: red'>height</span><span style='color: blue'>=</span><span style='color: magenta'>"460"</span>&gt;&lt;<span style='color: darkred'>/canvas</span>&gt;

&lt;script&gt;
<span style='color: blue'>let</span> ctx = canv.getContext(<span style='color: magenta'>'2d'</span>);
ctx.lineWidth = 2;
ctx.strokeStyle = <span style='color: magenta'>'red'</span>;
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(20, 100, 200, 20);
ctx.stroke();
&lt;/script&gt;

</pre>

<p>qradraticCurveTo()方法绘制出来的是一条虚拟曲线，必须着色才能看到。上述代码的效果如下，建议和图一做一下比较，联系画笔移动点、绘制指令所需参数的两个坐标点和贝塞尔曲线的关系，加深理解各坐标点在构造曲线时的具体作用。</p>
<p></p>
<canvas id="mycanv" width="300" height="100"></canvas>

<script>
let myctx = mycanv.getContext('2d');
myctx.lineWidth = 2;
myctx.strokeStyle = 'red';
myctx.moveTo(20, 20);
myctx.quadraticCurveTo(20, 100, 200, 20);
myctx.stroke();
</script>

<p>二次贝塞尔曲线与弧线很相似。实际上，弧线是二次贝塞尔曲线的一种，但二次贝塞尔曲线不都是规整的弧线，只有当控制点与起始点及其和结束点分别连接成线的线长相等时（即构成以控制点为顶点的等腰三角形时）所画的曲线才是规整的弧线。</p>
<p><br></p>
<p>小结：在canvas画布上使用 qradraticCurveTo()方法绘制曲线，首先需要将画笔移动到曲线的开始处，然后在绘制指令中给出控制点坐标值和结束点坐标值，最后 stroke 上色。</p>

红影 发表于 2022-8-22 12:45

这曲线绘制很漂亮，数学的线条之美{:4_187:}

马黑黑 发表于 2022-8-22 17:07

红影 发表于 2022-8-22 12:45
这曲线绘制很漂亮，数学的线条之美

数学是个深奥的学科，数学曲线是个深奥的课题

红影 发表于 2022-8-22 21:34

马黑黑 发表于 2022-8-22 17:07
数学是个深奥的学科，数学曲线是个深奥的课题

世界的本事是数学构建的。

马黑黑 发表于 2022-8-22 21:36

红影 发表于 2022-8-22 21:34
世界的本事是数学构建的。

错。是数学发现了这个业已存在的构建世界的规律。

红影 发表于 2022-8-23 15:55

马黑黑 发表于 2022-8-22 21:36
错。是数学发现了这个业已存在的构建世界的规律。

嗯，我打错字了，数学可以描述这个现实世界，是一种奇妙的语言。

马黑黑 发表于 2022-8-23 17:23

红影 发表于 2022-8-23 15:55
嗯，我打错字了，数学可以描述这个现实世界，是一种奇妙的语言。

人类的聪明之处就在于发明了数学

红影 发表于 2022-8-23 21:09

马黑黑 发表于 2022-8-23 17:23
人类的聪明之处就在于发明了数学

那时一种内在的规律的总结。

马黑黑 发表于 2022-8-23 21:10

红影 发表于 2022-8-23 21:09
那时一种内在的规律的总结。

是发明。

红影 发表于 2022-8-23 21:32

马黑黑 发表于 2022-8-23 21:10
是发明。

我觉得应该是发现。

马黑黑 发表于 2022-8-23 21:52

红影 发表于 2022-8-23 21:32
我觉得应该是发现。

发明。发现了数学里的规律，然后发明了数学。

加林森 发表于 2022-8-24 10:23

我只能来先看看了。了解一下。

马黑黑 发表于 2022-8-24 12:22

加林森 发表于 2022-8-24 10:23
我只能来先看看了。了解一下。

不急慢慢来

加林森 发表于 2022-8-24 13:15

马黑黑 发表于 2022-8-24 12:22
不急慢慢来

好的。

红影 发表于 2022-8-24 21:35

马黑黑 发表于 2022-8-23 21:52
发明。发现了数学里的规律，然后发明了数学。

还带这样划分的啊{:4_173:}

马黑黑 发表于 2022-8-24 22:02

红影 发表于 2022-8-24 21:35
还带这样划分的啊

我是搞科学研究的，必须严谨。

红影 发表于 2022-8-25 09:16

马黑黑 发表于 2022-8-24 22:02
我是搞科学研究的，必须严谨。

我觉得这话要改改，是“发现了数学里的规律，”并用一定的方式来表述这些规律。所以，还是算发现{:4_173:}

马黑黑 发表于 2022-8-25 12:26

红影 发表于 2022-8-25 09:16
我觉得这话要改改，是“发现了数学里的规律，”并用一定的方式来表述这些规律。所以，还是算发现{:4_173: ...

这是对数学的错误认知。

数学是人类发明的科学学科之一。你说的那些是数学的任务。

红影 发表于 2022-8-25 16:18

马黑黑 发表于 2022-8-25 12:26
这是对数学的错误认知。

数学是人类发明的科学学科之一。你说的那些是数学的任务。

不管是发明还是发现，数学都是挺强大的。

马黑黑 发表于 2022-8-25 18:51

红影 发表于 2022-8-25 16:18
不管是发明还是发现，数学都是挺强大的。

这是事实

查看完整版本: 在画布中使用二次贝塞尔曲线