|
|
请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
三次贝塞尔曲线和二次贝塞尔曲线本质上道理相通，前者仅是多一个控制点，因此本文的行文方式与介绍二次贝塞尔曲线的帖子是差不多的。
三次贝塞尔曲线需要四个点的坐标数据：曲线起始点坐标（x1,y1）、曲线第一个控制点坐标（cpx1,cpy1）、曲线第二个控制点坐标（cpx2,cpy2）和曲线终点坐标（x2,y2）。在 canvas 画布中，起始点坐标默认使用上一次绘制图形的路径终点坐标，若不存在路径终点坐标则起始点坐标为（0,0），也可通过 moveTo(x,y) 指令重新设定。在canvas画布中，绘制三次贝塞尔曲线有专门的指令，bezierCurveTo(cpx1, cpy1, cpx2, cpy2, endX, endY), 其中，cpx1 和 cpy1、cpx2 和 cpy2 分别为曲线两个控制点坐标，endX 和 endY 为曲线终点坐标，曲线起点坐标取上一回路径终点坐标或通过 moveTo(x,y) 指令定义。假设画笔标识为 ctx，我们来绘制一条三次贝塞尔曲线：
ctx.moveTo(50, 100);
ctx.bezierCurveTo(40, 5, 120, 0, 250, 100);
这表示，曲线从（50,100）出发，到（250，100）停车，曲线的第一个控制点是（40, 5)，第二个控制点是（120, 10），效果如下示例所示（小圆点用于标识四个点的位置）：
影响三次贝塞尔曲线的外观主要是控制点，上例中的两个小绿点就是两个控制点。控制点可以在曲线上，若此，绘制出来的将不是曲线而是一条直线；控制点可以为正负数、可以超出画布的范围，不同的数值将直接影响曲线的曲率和最终外观。
早些时候，各大浏览器只有Chrome较早支持绘制椭圆指令，为了兼容，大佬们经常使用三次贝塞尔曲线来绘制椭圆。现在我们可以直接使用 ellipse() 方法来实现椭圆的绘制了，不过重现一下用三次贝塞尔曲线画椭圆，对学习canvas画布绘制三次贝塞尔曲线还是有好处的。请看下面的绘制效果：
代码和解释如下：
/* 使用三次贝塞尔曲线绘制平躺的椭圆
要点：
① 两个控制点中，cpx1、cpx2和曲线起点、终点相一致，cpy1、cpy2两值相同
② 绘制两条曲线，第一条凸点朝上，第二条凸点朝下，第一条cpy均为 0，第二条
cpy均为画布的高度
③ 上述方式绘制的椭圆为闭合椭圆，可以使用 fill() 填充颜色
*/
ctx.moveTo(50, 75);
ctx.bezierCurveTo(50, 0, 250, 0, 250, 75);
ctx.bezierCurveTo(250, 150, 50, 150, 50, 75);
ctx.stroke();
【附】正统绘制椭圆效果和代码
效果：
代码和解释：
/* 使用 ellipse() 方法绘制椭圆
语法 ：ellipse(x, y, rx, ry, rotation, startAngle, endAngle, anticlockwise
其中：
① x,y 分别为椭圆的圆心xy坐标
② rx,ry 分别为椭圆的长轴半径和短轴半径
③ rotation 为椭圆的旋转弧度（需将角度换算为弧度，下同）
④ startAngle,endAngle 分别为椭圆的起始和终止弧度
⑤ anticlockwise 为是否以逆时针方向绘制（true/false）
*/
ctx.ellipse(150, 75, 100, 56, 0, 0, 2 * Math.PI, true);
ctx.stroke();
|
评分
-
| 参与人数 2 | 威望 +80 |
金钱 +160 |
经验 +80 |
收起
理由
|
 南无月
| + 30 |
+ 60 |
+ 30 |
很给力! |
 红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|
发表于 2024-4-16 10:38
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-4-16 20:52
