原创力文档- 1、本文档共2页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
arc,arcTo 以及 quadraticCurveTo. 他们都有一个共同点， 就是他们画的曲线都只能偏向一
边 ,今天讲的 bezierCurveTo 与他们最大的不同点就是有两个控制点， 即可以画出 S 形的曲线
了,感兴趣的朋友可以了解下
bezierCurveTo ，也就是所谓的贝赛尔曲线了， 如果你学过某些画图工具， 就能马上理解。
bezierCurveTo 的语法如下：
ctx.bezierCurveTo(x1,y1,x2,y2,x,y); 他的参数我照例解释一下，其中的（ x1,y1 ）即控制点
1 的坐标， （x2,y2 ）是控制点 2 的坐标， (x,y) 是他的终点坐标。和 quadraticCurveTo 一样，
他的起点坐标也是由 moveTo 预先设置好的。
所以， bezierCurveTo 画出一条曲线需要 4 个点：起点，终点，控制点 1，控制点 2.为了
后续讲解，这里我假定控制点 1 对应起点，控制点 2 对应终点
这里又要提到 canvas 画图的老问题了，就是代码画图全部靠猜，画到哪里你要刷新下
才能明了。
我还是延续前面的优良传统，画一些辅助线来帮助大家理解：
复制代码代码如下 :
var x1=450, // 控制点 1 的 x 坐标
y1 = 300, // 控制点 1 的 y
x2 = 450, // 控制点 2 的 x
y2 = 500,// 控制点 2 的 y
x = 300, // 终点 x
y = 500;// 终点 y
ctx.moveTo(300,300);// 起点
ctx.beginPath();
ctx.lineWidth = 5;
ctx.strokeStyle = "rgba(0,0,0,1)"
ctx.moveTo(300,300);
ctx.bezierCurveTo(x1,y1,x2,y2,x,y);
ctx.stroke();
//开始画辅助线
ctx.beginPath();
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.lineWidth = 1;
// 连接起点和控制点 1
ctx.moveTo(300,300);
ctx.lineTo(x1,y1);
// 连接终点和控制点 2
ctx.moveTo(x2,y2);
ctx.lineTo(x,y);
// 连接起点与终点（基线）
ctx.moveTo(300,300);
ctx.lineTo(x,y);
ctx.stroke();
这里先画了一个类似 quadraticCurveTo 的曲线，只偏向一边。这条线显得比较“圆润” ，
是因为控制点 1 与 2 的 x 坐标是相同的。
现在再画一个 S 形的曲线，证明 bezierCurveTo 是与众不同的：
复制代码代码如下 :
var x1 = 150;
...
其实只要把控制点 1 的坐标变一下就行了。 如果控制点 1 与控制点 2 的坐标分别处在基
线的两边，则是画出 S 形的曲线；如果都在基线的某一边，则是类似于 quadraticCurveTo 的
效果。
这个例子的情形比较简单， 基线条（起点至终点）是竖直的， 但实际应用中大部分时候
我们的基线都是斜着的，那情况就复杂多了。不过
文档评论（0）