html5Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法_html

前面的文章我已经讲了3种在canvas中画曲线的方法：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画图的老问题了，就是代码画图全部靠猜，画到哪里你要刷新下才能明了。

我还是延续前面的优良传统，画一些辅助线来帮助大家理解：

查看更多关于html5Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法_html的详细内容...