仕様書

文脈

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

負

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

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

小数

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

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

Z 軸

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

座標変換

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

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

具体的な座標系

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

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

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

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

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

円形画面の座標系

関連

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

[27] PDF座標系は数学式。

歴史

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

[12] Blink Coordinate Spaces - The Chromium Projects (2015-03-21 10:14:33 +09:00 版) https://www.chromium.org/developers/design-documents/blink-coordinate-spaces

[23] Clarify canvas coordinate system (annevk著, 2017-09-29 01:15:22 +09:00) https://github.com/whatwg/html/commit/8f2146b82c395397a8a3076ec2d642599f06d726

[24] Canvas and CSS pixels · Issue #2854 · whatwg/html (2017-09-29 15:25:12 +09:00) https://github.com/whatwg/html/issues/2854

[25] Canvas and CSS pixels · Issue #2854 · whatwg/html (2017-09-29 15:26:03 +09:00) https://github.com/whatwg/html/issues/2854

[26] Editorial: clarify canvas coordinate system by annevk · Pull Request #2867 · whatwg/html (2017-09-29 15:27:31 +09:00) https://github.com/whatwg/html/pull/2867