请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2024-4-17 12:08 编辑
三次贝塞尔曲线可以自闭合，只需设置曲线的起点坐标和终点坐标重合在一起。假设曲线起始点为 P0(100, 190)，则曲线终点 P3 亦为 (100, 190)，这在canvas画布上我们将如此操作（画笔标识为 ctx）：
ctx.moveTo(100, 190);
ctx.bezierCurveTo(cpx1, cpy1, cpx2, cyp2, 100, 190);
这里，我们先将画笔移到（100, 190）坐标处，表示曲线的起点从该处画起，并设定曲线的终点为（100，190），表示曲线画回了起点处。剩下的工作就是设置两个控制点坐标：P1(cpx1, cpy1) 和 P2(cpx2, cpy2)。之前我们在相关文章中谈到贝塞尔曲线的曲线外观会受控制点的直接影响，所以设置 P1 和 P2 在这里大有学问。本文以绘制多叶草的一张叶子为设计目标，同时出于简化目的，仅通过Y方向的控制点来控制叶子的长度、通过控制点的X方向来控制叶子的厚度。我们的画布是 200 * 200 的尺寸，上面，我们已经将叶片的底端定位在了 (100, 190) 坐标处，也就是靠近画布底部的中央，那么，叶片该是往上长的，所以，Y方向的两个控制点我们都设为 -50，以便让叶片往上方拉扯到靠边画布的顶边。X方向控制点要左右对称，两个点以画布水平方向的中心为界，若第一个点为0，则第二个点为画布的宽度，若第一个点是 50，则第二个点是画布宽度减去50，依此类推。如此，P1 和 P2 我们可以这么确定下来：
P1(-60,-50)
P2(260,-50)
控制点1、控制点2Y方向的坐标值一样，都是 -50；X方向则应是对称的：点1是 -60，那么，点2为画布宽度减去 - 60 等于 260。最终，画布的绘制操作代码如下：
let ctx = canv.getContext('2d');
ctx.fillStyle = ctx.strokeStyle = 'green';
ctx.beginPath();
ctx.moveTo(100, 190); //曲线出发点
/* 三次贝塞尔曲线参数说明
cpx1, cpy1, cpx2, cpy2, xEnd, yEnd
cpx1 - 控制点1X坐标
cpy1 - 控制点1Y坐标
cpx2 - 控制点2X坐标
cpy2 - 控制点2Y坐标
xEnd - 曲线终点X坐标
yEnd - 曲线终点Y坐标
*/
ctx.bezierCurveTo(-60, -50, 260, -50, 100, 190);
ctx.fill();
ctx.closePath();
效果：
这就是仅用一根闭合性曲线绘制出来的效果。如果我们让多根曲线按一定规律拼合在一起，那就是多叶草了。以下页面是使用上述绘制原理编写出来的原创工具，所绘制的多叶草可以右击→图片另存为保存下来，图片尺寸为 400*400，使用时可以通过设置宽高改变图片的大小：
canvas画布绘制多叶草
| 
发表于 2024-4-17 12:02
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-4-17 18:18
