| CARVIEW |
Select Language
HTTP/2 200
x-guploader-uploadid: AAwnv3KGUZLDT6TcViBqLAsUmjhGt-zAdjSLdvqrQgSLiG3E8rGEu6mHxdvLs1FVOJdlkagv703JHxA
x-goog-generation: 1760058678224672
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 156801
x-goog-meta-goog-reserved-file-mtime: 1760056922
x-goog-hash: crc32c=b+B56Q==, md5=UnTojv92G57YyGnaA1ZKiQ==
x-goog-storage-class: STANDARD
accept-ranges: none
expires: Sat, 11 Oct 2025 01:27:16 GMT
cache-control: public, max-age=3600
last-modified: Fri, 10 Oct 2025 01:11:18 GMT
etag: W/"5274e88eff761b9ed8c869da03564a89"
content-type: text/html
age: 0
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
alt-svc: clear
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosniff
strict-transport-security: max-age=63072000
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-frame-options: DENY
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
x-cloud-trace-context: 93b56cced4f906c659a009b629990a6b
date: Sat, 11 Oct 2025 00:27:16 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
Path2D: Path2D() コンストラクター - Web API | MDN
Toggle sidebar
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
Path2D: Path2D() コンストラクター
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2016年8月.
Path2D() コンストラクターは、新たにインスタンス化した Path2D オブジェクトを返します。他のパスを引数に渡すこともできます（複製がつくられます）。また、SVG パスからなるデータを文字列で渡すこともできます。
構文
js
new Path2D()
new Path2D(path)
new Path2D(d)
引数
例
パスを複製してつくる
これは、Path2D のパスを複製して作成する簡単なコードスニペットです。
<canvas id="canvas"></canvas>
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let path1 = new Path2D();
path1.rect(10, 10, 100, 100);
let path2 = new Path2D(path1);
path2.moveTo(220, 60);
path2.arc(170, 60, 50, 0, 2 * Math.PI);
ctx.stroke(path2);
SVG パスを使用する
これは、SVG パスデータ を使用して Path2D のパスを作成する簡単なコードスニペットです。パスは点 (M10 10) に移ってから、水平に 80 ポイント右に移動し (h 80)、80 ポイント下がり (v 80)、80 ポイント左に移動し (h -80)、開始点に戻ります (Z)。
<canvas id="canvas"></canvas>
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let p = new Path2D("M10 10 h 80 v 80 h -80 Z");
ctx.fill(p);
仕様書
| Specification |
|---|
| HTML # dom-path2d-dev |
ブラウザーの互換性
Loading…
関連情報
Path2Dインターフェイスに、このコンストラクターは属します。