在canvas画布中绘制三次贝塞尔曲线
三次贝塞尔曲线和二次贝塞尔曲线本质上道理相通,前者仅是多一个控制点,因此本文的行文方式与介绍二次贝塞尔曲线的帖子是差不多的。 三次贝塞尔曲线需要四个点的坐标数据:曲线起始点坐标(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); 这表示,曲线从(50,100)出发,到(250,100)停车,曲线的第一个控制点是(40, 5),第二个控制点是(120, 10),效果如下示例所示(小圆点用于标识四个点的位置): 影响三次贝塞尔曲线的外观主要是控制点,上例中的两个小绿点就是两个控制点。控制点可以在曲线上,若此,绘制出来的将不是曲线而是一条直线;控制点可以为正负数、可以超出画布的范围,不同的数值将直接影响曲线的曲率和最终外观。 早些时候,各大浏览器只有Chrome较早支持绘制椭圆指令,为了兼容,大佬们经常使用三次贝塞尔曲线来绘制椭圆。现在我们可以直接使用 ellipse() 方法来实现椭圆的绘制了,不过重现一下用三次贝塞尔曲线画椭圆,对学习canvas画布绘制三次贝塞尔曲线还是有好处的。请看下面的绘制效果: 代码和解释如下: 【附】正统绘制椭圆效果和代码 效果: 代码和解释: |
前一篇: 《魂引》贴子说明
下一篇: 在canvas画布中绘制二次贝塞尔曲线
评论列表 [0条]