座標起源

座標系 (Web)

[1] Web では、左上隅原点とし、水平方向を X 軸、 垂直方向を Y 軸として右下の方向になる(平面)座標系を採用しています。

目次

  1. 仕様書
  2. 文脈
  3. 小数
  4. Z
  5. 座標変換
  6. 具体的な座標系
  7. 円形画面の座標系
  8. 関連
  9. 歴史

仕様書#

文脈#

[2] 次の場面でこの座標系が採用されています。

#

[3] の方向もありますが、制限もあります。

[4] 媒体素片では構文的にの値は表現できません。

小数#

[5] 座標上の値は基本的には画素単位となっていますが、 小数座標も表現できることがあります。

[6] 媒体素片では構文的に画素単位または百分率単位に満たない値は表現できません。

Z#

[7] CSS では z-index 特性により前後方向を指定できます。 しかし XY とは違って無単位の値になっています。

[8] XY の軸とは違って前後方向に対して斜めに表示できません。

座標変換#

[9] 画像写像CSS による変形の結果に対する座標となっています。

[10] 媒体素片アスペクト比の変換等の変形の結果に対する座標となっています。

具体的な座標系#

[15] 次の座標系は、いずれも原点左辺からのCSS画素数を X とし、 上辺からのCSS画素数を Y とするものです。

[18] 画面では、出力装置の左上隅が原点です。

[16] 次の機能で使われています >>14

[21] マルチディスプレイ環境については、画面を参照。

[17] では、当該の左上隅が原点です。

[19] 次の機能で使われています >>14

円形画面の座標系#

[20] 時計などの円形画面を持つ装置

関連#

[22] 他に、地球座標枠装置座標枠が使われます。

[27] PDF座標系数学式。

歴史#

[11] Bug 28029 – Mouse coordinates represented in CSS pixels do not account for retina displays with window.devicePixelRatio > 1. ( 版) https://www.w3.org/Bugs/Public/show_bug.cgi?id=28029#c6

[12] Blink Coordinate Spaces - The Chromium Projects ( 版) https://www.chromium.org/developers/design-documents/blink-coordinate-spaces

[23] Clarify canvas coordinate system (annevk著, ) https://github.com/whatwg/html/commit/8f2146b82c395397a8a3076ec2d642599f06d726

[24] Canvas and CSS pixels · Issue #2854 · whatwg/html () https://github.com/whatwg/html/issues/2854

[25] Canvas and CSS pixels · Issue #2854 · whatwg/html () https://github.com/whatwg/html/issues/2854

[26] Editorial: clarify canvas coordinate system by annevk · Pull Request #2867 · whatwg/html () https://github.com/whatwg/html/pull/2867