これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
Path2D()
コンストラクタは、新たにインスタンス化した Path2D
オブジェクトを返します。他のパスを引数に渡すこともできます(複製がつくられます)。また、SVG パス からなるデータを文字列で渡すこともできます。
構文
new Path2D();
new Path2D(path);
new Path2D(d);
引数
path
Optional
- 他の
Path2D
オブジェクトを渡して呼出すと、引数の path
が複製されます。
d
Optional
- SVG パス からなる文字列を渡して呼出すと、その内容のパスが新たにつくられます。
例
パスを複製してつくる
これは、Path2D
のパスを複製して作成する簡単なコードスニペットです。
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var path1 = new Path2D();
path1.rect(10, 10, 100,100);
var path2 = new Path2D(path1);
path2.moveTo(220, 60);
path2.arc(170, 60, 50, 0, 2 * Math.PI);
ctx.stroke(path2);
以下のコードを編集して、その変更が canvas に反映されることを確かめてください:
Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code" style="height: 150px">
var path1 = new Path2D();
path1.rect(10, 10, 100,100);
var path2 = new Path2D(path1);
path2.moveTo(220, 60);
path2.arc(170, 60, 50, 0, 2 * Math.PI);
ctx.stroke(path2);</textarea>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener("click", function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener("click", function() {
textarea.focus();
})
textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
SVG パスを使う
これは、SVG パスデータ を使用して Path2D
のパスを作成する簡単なコードスニペットです。パスは点 (M10 10
) に移ってから、水平に 80 ポイント右に移動し (h 80
)、80 ポイント下がり (v 80
)、80ポイント左に移動し(h -80
)、開始点に戻ります (z
)。
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var p = new Path2D("M10 10 h 80 v 80 h -80 Z");
ctx.fill(p);
以下のコードを編集して、その変更が canvas に反映されることを確かめてください。
Playable code2
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
var p = new Path2D("M10 10 h 80 v 80 h -80 Z");
ctx.fill(p);</textarea>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener("click", function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener("click", function() {
textarea.focus();
})
textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
仕様
Feature |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
基本サポート |
? |
31.0 (31.0) |
未サポート |
? |
? |
Feature |
Android |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
基本サポート |
? |
31.0 (31.0) |
未サポート |
? |
? |
関連情報
Path2D
インタフェースに、このコンストラクタは属します。