HTML5 Canvas标签使用收录(3)_H5之家 - 中国HTML5教程资源分享第一站

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

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

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 指定绺的位置。

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>

4. fill, stroke, clip

fill 与 stroke 这两个方法很好理解，分别用来填充路径与绘制路径线条。