Canvas--贝塞尔曲线

时间 2019-11-12

标签 canvas 曲线繁體版

原文原文链接

一、quadraticCurveTo(cpx,cpy,x,y)：二次贝塞尔曲线spa

　　cpx----贝塞尔控制点的 x 坐标。3d

　　cpy----贝塞尔控制点的 y 坐标。code

　　 x ----结束点的 x 坐标。blog

　　 y ----结束点的 y 坐标。class

1 context.beginPath()
2 context.moveTo(50, 50)
3 context.quadraticCurveTo(50,100,200,40)
4 context.stroke()
5 
6 context.beginPath()
7 context.moveTo(50, 50)
8 context.quadraticCurveTo(40,150,200,40)
9 context.stroke()

二、bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)：三次贝塞尔曲线im

　　cp1x----第一个贝塞尔控制点的 x 坐标。img

　　cp1y----第一个贝塞尔控制点的 y 坐标。di

　　cp2x----第二个贝塞尔控制点的 x 坐标。co

　　cp2y----第二个贝塞尔控制点的 y 坐标。ps

　　 x -----结束点的 x 坐标。

　　 y -----结束点的 y 坐标。

1 context.beginPath()
2 context.moveTo(50, 50)
3 context.bezierCurveTo(50,100,200,100,200,50)
4 context.stroke()