html5Canvas画图教程8—canvas里画曲线之bezierCurveTo方法.docxVIP

arc,arcTo 以及 quadraticCurveTo. 他们都有一个共同点， 就是他们画的曲线都只能偏向一 边,今天讲的 bezierCurveTo 与他们最大的不同点就是有两个控制点， 即可以画出 S 形的曲线 了,感兴趣的朋友可以了解下 bezierCurveTo ，也就是所谓的贝赛尔曲线了， 如果你学过某些画图工具， 就能马上理解。 bezierCurveTo 的语法如下： 1  ctx.bezierCurveTo(x1,y1,x2,y2,x,y); 他的参数我照例解释一下，其中的（ x1,y1 ）即控制点 的坐标，（ 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, // 控制点