FN1501008 | Canvas 2D: Path2Dインターフェイス

HTML5テクニカルノート

Canvas 2D: Path2Dインターフェイス

ID: FN1501008

Technique: HTML5 and JavaScript

API: Canvas 2D

これは実験的な技術です。仕様として定まっておらず、ブラウザによって実装が異なります。将来の仕様で変更される場合があります。

Path2Dインターフェイス
API	Canvas 2D
Path2D()コンストラクタ
文法	Path2D([path])
概要	Path2Dインスタンスをつくる。
引数	path － Path2DオブジェクトまたはSVGパスを示す文字列。引数にもとづいて新たなインスタンスがつくられる。引数は省くことができる。
addPath()メソッド
文法	addPath(path[, transform])
概要	現行パスに引数のパスを加える。
引数	path －加えるPath2Dオブジェクト。 transform －加えるパスの変換行列として用いるSVGMatrix(省略できる)。
戻り値	なし。
closePath()メソッド
文法	closePath()
概要	現行サブパスの起点に戻ってパスを閉じる。現行の点と起点とは直線で結ばれる。すでにパスが閉じているか、1点しかないときは、何も実行されない。
引数	なし。
戻り値	なし。
moveTo()メソッド
文法	moveTo(x, y)
概要	新たなサブパスの開始点を定める。
引数	x, y －新たな開始点のxy座標。
戻り値	なし。
line()メソッド
文法	line(x, y)
概要	現行の点と引数のxy座標を直線で結ぶ。
引数	x, y －直線で結ぶxy座標。
戻り値	なし。
bezierCurveTo()メソッド
文法	bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
概要	現行の点と終了点を3次ベジエ曲線で結ぶ。3次ベジエ曲線は、ふたつのコントロールポイントで定められる。
引数	cp1x, cp1y －開始点のコントロールポイントのxy座標。 cp2x, cp2y －終了点のコントロールポイントのxy座標。 x, y －終了点のxy座標。
戻り値	なし。
quadraticCurveTo()メソッド
文法	quadraticCurveTo(cpx, cpy, x, y)
概要	現行の点と終了点を2次ベジエ曲線で結ぶ。2次ベジエ曲線は、ふたつの点に共通するひとつのコントロールポイントで定められる^[*1]。
引数	cpx, cpy －コントロールポイントのxy座標。 x, y －終了点のxy座標。
戻り値	なし。
arc()メソッド
文法	arc(x, y, radius, startAngle, endAngle[, anticlockwise])
概要	パスに円弧を加える。
引数	x, y －中心のxy座標。 radius －半径。 startAngle, endAngle －開始角と終了角。 anticlockwise －半時計回りかどうかを示すブール値(デフォルトは時計回り)。
戻り値	なし。
arcTo()メソッド
文法	arcTo(x1, y1, x2, y2, radius)
概要	パスに円弧を加えて、現行の点とは直線で結ぶ。
引数	x1, y1 －開始コントロールポイントのxy座標。 x2, y2 －終了コントロールポイントのxy座標。 radius －半径。
戻り値	なし。
ellipse()メソッド
文法	ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
概要	パスに楕円の弧を加える。
引数	x, y －中心のxy座標。 radiusX, radiusY － x軸およびy軸方向の半径。 rotation －回転角の度数。 startAngle, endAngle －開始角と終了角。 anticlockwise －半時計回りかどうかを示すブール値(デフォルトは時計回り)。
戻り値	なし。
rect()メソッド
文法	rect(x, y, width, height)
概要	長方形のパスをつくる。
引数	x, y －左上角のxy座標。 width, height －幅と高さ。
戻り値	なし。

[*1] 2次ベジエ曲線については、「パスにこだわる」をご参照ください。

説明

Canvas 2D APIのPath2Dインターフェイスはパスを定め、CanvasRenderingContext2Dオブジェクトで用いることができます。CanvasRenderingContext2Dのパスを扱うメソッドは、Path2Dにも備わっています。Path2Dオブジェクトにつくったパスは、必要なときいつでもCanvasで使えます。

Path2D()コンストラクタの引数にPath2Dオブジェクトを渡すと、パスを複製したインスタンスが得られます。また、SVGデータを文字列で与えれば、そのパスがのままCanvasに描けます。

var path = new Path2D("M10 10 h 80 v 80 h -80 Z");

引数なしにPath2D()コンストラクタでつくった空のパスには、CanvasRenderingContext2Dと同じメソッドを使ってパスが描けます。

var circle = new Path2D();
circle.arc(50, 50, 50, 0, 2 * Math.PI);
context2D.stroke(circle);

CanvasRenderingContext2Dのつぎのメソッドは、Path2Dオブジェクトを渡してパスが描けるようになりました。

例

Path2Dのパスを扱うメソッドの使い方については、MDNのPath2DあるいはCanvasRenderingContext2Dのつぎに掲げた「Examples」をご覧ください。

作成者: 野中文雄
作成日: 2015年1月29日