请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2022-8-22 17:13 编辑
在画布中使用二次贝塞尔曲线 | 马黑黑
贝塞尔曲线广泛应用于流水线形设计，我们在任何一辆现代轿车上都能看到它的身影。贝塞尔曲线在ps等作图工具中也发挥着不可缺少的作用，如钢笔即是。在HTML的世界里，贝塞尔曲线同样拥有施展的天地，像SVG、canvas画布等，都可以是赛贝尔曲线大显身手的舞台。
那么，什么是贝塞尔曲线？贝塞尔曲线是一条流水形态一样的平滑或光滑的曲线，它分为多种：第一种，数学上称为一次方贝塞尔曲线，这个其实就是一根直线，所以又叫线性贝塞尔曲线（但它根本就不是曲线）；第二种，二次方贝塞尔曲线，这是我们今天要讨论的，简称二次贝赛尔曲线，它由三个点共同控制而成，其中两个点是起始点和结束点，另一个点是控制点（也叫拉扯点）。前两个点在曲线上（头尾），后一个点即控制点不在线上（如下图所示），它在先外某一点拉扯（控制）曲线的弯曲程度（曲率）；第三种，三次贝塞尔曲线，由起始点、两个控制点、结束点共同作用而成；其他，多次贝塞尔曲线，无非就是控制点多了一些而已，可以视为是三次贝塞尔曲线的扩展。
（图一：二次贝塞尔曲线）
在画布上绘制二次赛贝尔曲线，需要一个绘制指令（ctx 是画笔操作句柄）：
ctx.quadraticCurveTo(cpx,cpy,x,y);
quadraticCurveTo()需要四个参数，其实是两对参数：cpx 和 cpy 是一对，cp是控制点的意思，两个参数表明是曲线外控制点（拉扯点）的xy坐标；xy是一对，指结束点的xy坐标。嗯？起始点去哪儿了？起始点是画笔（ctx）绘制曲线前 moveTo 的那个点，如果没有 moveTo指令，默认是上一个绘制路径的结束点。
还是通过实例来理解 quadraticCurveTo() 指令如何绘制二次贝塞尔曲线，我们就绘制上图所以的那根曲线：
<canvas id="canv" width="600" height="460"></canvas>
<script>
let ctx = canv.getContext('2d');
ctx.lineWidth = 2;
ctx.strokeStyle = 'red';
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(20, 100, 200, 20);
ctx.stroke();
</script>
qradraticCurveTo()方法绘制出来的是一条虚拟曲线，必须着色才能看到。上述代码的效果如下，建议和图一做一下比较，联系画笔移动点、绘制指令所需参数的两个坐标点和贝塞尔曲线的关系，加深理解各坐标点在构造曲线时的具体作用。
二次贝塞尔曲线与弧线很相似。实际上，弧线是二次贝塞尔曲线的一种，但二次贝塞尔曲线不都是规整的弧线，只有当控制点与起始点及其和结束点分别连接成线的线长相等时（即构成以控制点为顶点的等腰三角形时）所画的曲线才是规整的弧线。
小结：在canvas画布上使用 qradraticCurveTo()方法绘制曲线，首先需要将画笔移动到曲线的开始处，然后在绘制指令中给出控制点坐标值和结束点坐标值，最后 stroke 上色。
| 
发表于 2022-8-22 12:24
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2022-8-24 10:23
