AnimateCC基础教学:二次贝塞尔曲线的绘制。

 钢笔手工绘制(位于:二次曲线图层)和代码绘制(位于:代码图层)同时展开:

核心代码:

var x1=100;//起始点
var y1=100;
var x2=200;//结束点
var y2=300;
var cpx=300;//控制点
var cpy=200;
var myG=new createjs.Graphics();
myG.beginStroke("#0000FF");
myG.moveTo(x1,y1);
/*myG.quadraticCurveTo(cpx,cpy,x2,y2);*/
myG.bezierCurveTo(x1,y1,cpx,cpy,x2,y2);
var myS=new createjs.Shape(myG);
stage.addChild(myS);
stage.update();

 二次贝塞尔曲线可以看做是三次贝塞尔曲线的特殊情况：

myG.quadraticCurveTo(cpx,cpy,x2,y2); 可以写成 myG.bezierCurveTo(x1,y1,cpx,cpy,x2,y2);

此时手工工具绘制和代码绘制完全吻合。否则，会成下面的状态:两种方法有一定的误差,不完全吻合。如下图:

 此问题很特别，待解决。

相关链接:使用AnimateCC 绘制三次贝塞尔曲线-CSDN博客