canvas画布:闭合性三次贝塞尔曲线的绘制

位置: 首页 > 前端三套件
[发布: 2024.4.17  作者: 马黑  阅读: 90]

三次贝塞尔曲线可以自闭合,只需设置曲线的起点坐标和终点坐标重合在一起。假设曲线起始点为 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画布绘制多叶草

前一篇: 9块9包邮的canvas放大镜
下一篇: CSS关键帧动画:元素绕椭圆圆周运动的实现(一)

发表评论:

  
 

评论列表 [2条]

#2 | 飞飞 于 2024-4-17 12:55 发布: 宽度和高度一个-60和一个-50也是故意这样设计的吧。。这么细微的差别,真是太细致了。。

#1 | 悄然 于 2024-4-17 12:49 发布: 原来叶片是这画出来的,只有一根线首尾相接,画布左上角外部和右上角外部各钉一个钉子扯着。。老师写得容易理解,回头想想这个构思是太巧了。。

Copyright © 2023 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com