html5 画不规则的线条,html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法...

继续讲canvas中画曲线的方法，今天讲quadraticCurveTo。

说实话这个方法有点吓人，单从函数名称上都可以初体验。话说，我觉得有必要把这个函数名缩短。

quadratic的意思是二次，即数学中二次元方程那个二次。而ctx.quadraticCurveTo的参数如下：

ctx.quadraticCurveTo(x1,y1,x,y);

其中x,y是终点的坐标，而x1,y1是曲线控制点的坐标？什么？你问我起点在哪里？起点在此之前用moveTo确定。

我之所以把控制点的坐标带上序号1，是因为后面讲的某个画曲线的函数有两个控制点，也就有x2,y2了，所以这里先打个预防针。

我们由moveTo确定的起点和quadraticCurveTo自身确定的终点，可以连接成一条直线，由于quadraticCurveTo只有一个控制点，这个控制点不是在直线左边，就是在直线右边，所以，quadraticCurveTo永远只能画弧线，还是画不出S形。

为了便于理解，我还是沿用上一篇文章的画辅助线的方法。初步代码如下：

var x1=350,

y1 = 250,

x = 400,

y = 500;

ctx.beginPath();

ctx.strokeStyle="#000";

ctx.moveTo(300,300); //起点

ctx.quadraticCurveTo(x1,y1,x,y); //正牌曲线

ctx.stroke();

ctx.beginPath();</