| CARVIEW |
Select Language
HTTP/2 200
content-type: text/html
x-guploader-uploadid: AAwnv3Lc1XLUD6er6ox_tIB-SzrRXW9dRryRDzhg5GxajcAWZ8AHVP9kuihd801dLyqIuBbX
cache-control: public, max-age=3600
expires: Fri, 10 Oct 2025 21:18:51 GMT
last-modified: Fri, 10 Oct 2025 01:11:36 GMT
etag: W/"6b7e78d3ad34e91c78cf7881eb198c8e"
x-goog-generation: 1760058696010259
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 176189
x-goog-meta-goog-reserved-file-mtime: 1760056929
x-goog-hash: crc32c=JjqaRA==, md5=a35406006Rx4z3iB6xmMjg==
x-goog-storage-class: STANDARD
accept-ranges: none
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: c9eb470903132f495b94cc67d44a6d0f
date: Fri, 10 Oct 2025 20:18:52 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
WebGLRenderingContext.drawElements() - Web API | MDN
Toggle sidebar
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
WebGLRenderingContext.drawElements()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
WebGLRenderingContext.drawElements() は WebGL API のメソッドで、配列データのプリミティブを描画します。
構文
js
drawElements(mode, count, type, offset);
引数
mode-
GLenumで、描画するプリミティブの型を指定します。取りうる値は次の通りです。gl.POINTS: 単一の点を描きます。gl.LINE_STRIP: 直線を次の頂点に向けて描きます。gl.LINE_LOOP: 直線を次の頂点に向けて描き、最後の頂点を最初の頂点に接続します。gl.LINES: 2 つの頂点の間に線を描きます。gl.TRIANGLE_STRIPgl.TRIANGLE_FANgl.TRIANGLES: 3 つの頂点のグループで三角形を描きます。
- count
-
GLsizeiで、レンダリングする要素配列バッファーの要素数を指定します。例えば、gl.LINESを使ってワイヤーフレームの三角形を描く場合、線 1 本あたり 2 つの端点× 3 本 ＝ 6 要素になります。しかし、同じワイヤーフレームの三角形をgl.LINE_STRIPで描画する場合、要素配列バッファーは 1 本目の終点/ 2 本目の始点、 2 本目の終点/ 3 本目の始点のインデックスを繰り返さないので、countは 4 個となります。同じ三角形をgl.LINE_LOOPで描画する場合、要素配列バッファーは最初と最後の頂点を繰り返さないので、countは 3 となります。 - type
-
GLenumで、要素の配列バッファーの値の型を指定します。取りうる値は次の通りです。gl.UNSIGNED_BYTEgl.UNSIGNED_SHORTOES_element_index_uint拡張を使用する場合:gl.UNSIGNED_INT
- offset
-
GLintptrで、要素の配列バッファー内における倍とオフセットを指定します。指定されたtypeの大きさの正しい倍数でなければなりません。
返値
なし (undefined)。
例外
modeが受け付けられる値のいずれでもなかった場合、gl.INVALID_ENUMエラーが発生します。offsetが指定された型の正しい倍数でなければ、gl.INVALID_OPERATIONエラーが発生します。countが負の数であった場合は、gl.INVALID_VALUEエラーが発生します。
例
js
gl.drawElements(gl.POINTS, 8, gl.UNSIGNED_BYTE, 0);
仕様書
| Specification |
|---|
| WebGL Specification # 5.14.11 |
ブラウザーの互換性
Loading…