HTML5 Canvas 起步(2) - 路径（3）

3. 曲线 arcTo, arc, quadraticCurveTo, bezierCurveTo

void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);

按照 WHATWG 文档的说明，这个方法是画一个与两条射线相切的的圆弧，两条射线其中一条为穿过 Context 绘制起点，终点为 (x1, y1)，另外一条为穿过 (x2, y2)，终点为 (x1, y1)，这条圆弧为最小的与这两条射线相切的圆弧。在调用完 arcTo 方法后，将 圆弧与 射线 (x1, y1)-(x2, y2) 的切点添加到当前路径中，做为下次绘制的起点。

在测试中发现，Firefox 和 Opera 目前对这个方法的支持并不好，只有 Chrome 和 Safari 4 能绘制出正确的路径。

图中的的两条灰色直线是偏移 4 个像素后的两条射线所在的位置。

<canvas id="canvas" width="500" height="500"></canvas><script type="text/javascript">    var canvas = document.getElementById("canvas");    var ctx = canvas.getContext("2d");    ctx.beginPath();    ctx.strokeStyle = "#000";    ctx.translate(200, 200);    ctx.moveTo(10, 10);    ctx.arcTo(110, 60, 10, 110, 30);    ctx.stroke();        ctx.beginPath();    ctx.strokeStyle = "#999";    ctx.moveTo(10, 6);    ctx.lineTo(114, 60);    ctx.lineTo(10, 114);    ctx.stroke();</script>

void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);

arc 方法用来绘制一段圆弧路径，通过圆心位置、起始弧度、终止弧度来指定圆弧的位置和大小，这个方法也不依赖于 Context 维护的绘制起点。而在画圆弧时的旋转方向则由最后一个参数 anticlockwise 来指定，如果为 true 就是逆时针，false 则为顺时针。

void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);

quadraticCurveTo 方法用来绘制二次样条曲线路径，参数中 cpx 与 cpy 指定控制点的位置，x 和 y 指定终点的位置，起点则是由 Context 维护的绘制起点。

void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);

bezierCurveTo 方法用来绘制贝塞尔曲线路径，它与 quadraticCurveTo 相似，不过贝塞尔曲线有两个控制点，因此参数中的 cp1x, cp1y, cp2x, cp2y 用来指定两个控制点的位置，而 x 和 y 指定绺的位置。

<canvas id="canvas" width="500" height="500"></canvas><script type="text/javascript">    var canvas = document.getElementById("canvas");    var ctx = canvas.getContext("2d");    ctx.translate(10, 10);    ctx.beginPath();    ctx.arc(50, 50, 50, 0, Math.PI, true);    ctx.stroke();    // quadraticCurveTo    ctx.beginPath();    ctx.strokeStyle = "#000";    ctx.moveTo(110, 50);    ctx.quadraticCurveTo(160, 0, 210, 50);    ctx.stroke();    ctx.beginPath();    ctx.strokeStyle = "red";    ctx.moveTo(110, 50);    ctx.lineTo(160, 0);    ctx.lineTo(210, 50);    ctx.stroke();    // bezierCurveTo    ctx.beginPath();    ctx.strokeStyle = "#000";    ctx.moveTo(220, 50);    ctx.bezierCurveTo(250, 0, 280, 10, 320, 50);    ctx.stroke();    ctx.beginPath();    ctx.strokeStyle = "red";    ctx.moveTo(220, 50);    ctx.lineTo(250, 0);    ctx.lineTo(280, 10);    ctx.lineTo(320, 50);    ctx.stroke();</script>