Edit

Page

Page title:

Page body:

[1]
[Q[[[書式付け構造]]が[[レンダリング]]される[[空間]]]]を、
[DFN[[RUBY[画布][がふ]@en[canvas]]]]といいます。
[SRC@en[[[CSS 2.1]] 2.3.1]]

* 仕様書

[REFS[
- [25] [[CSS2]]
-- [26] '''[CSECTION@en[2.3.1 The canvas]]''' <http://www.w3.org/TR/CSS2/intro.html#the-canvas>
--[27] [CSECTION@en[9.1.1 The viewport]]
<http://www.w3.org/TR/CSS2/visuren.html#viewport>
--[28] [CSECTION@en[14.2 The background]]
<http://www.w3.org/TR/CSS2/colors.html#background>
--[29] [CSECTION@en[A.2 Introduction to aural style sheets]]
<http://www.w3.org/TR/CSS2/aural.html#aural-intro>
]REFS]

* 媒体との関係

[32] [[表示]]などと同じく[[視覚的]]な用語ではありますが、[[画面]]表示だけでなく、
[[音声]]出力なども含め、[[媒体]]に依存しない用語ということになっています。

* 大きさ

[5] [[画布]]は[[次元]] ([[座標軸]]) において[[無限]]です
[SRC@en[[[CSS 2.1]] 2.3.1]]。

[6]
ただし[[レンダリング]]そのものは普通、対象となる[[媒体]]によって決めた[[有限]]の領域内で行われます
[SRC@en[[[CSS 2.1]] 2.3.1]]。

[7]
例えば、[[画面]]に[[レンダリング]]する[[利用者エージェント]]は[[閲覧領域]]の[[幅]]に基づいて[[レンダリング]]に使う領域の初期幅を決めます。
[[頁]]に[[レンダリング]]する[[利用者エージェント]]は[[頁]]の[[幅]]と[[高さ]]の制約を課します。
[[音声利用者エージェント]]は[[音声空間]]に制限を課すかもしれませんが、[[時間]]には課さないかもしれません。
[SRC@en[[[CSS 2.1]] 2.3.1]]

[11] [[画布]]には[RUBYB[[[原点]]]@en[origin]]が定義されているようです。

[12] [[初期包含ブロック]]は[[画布]]の[[原点]]に[RUBYB[錨付けされています]@en[anchored]]。
[SRC@en[[[CSS 2.1]] 10.1]]

* Viewport との関係

[2]
[[Viewport]] が[[画布]]中の[[文書]]が[[レンダリング]]されている[RUBYB[[[領域]]]@en[area]]より小さい時は、
[[利用者エージェント]]は[[スクロール機構]]を提供する[['''べきです''']]
[SRC@en[[[CSS 2.1]] 9.1.1]]。

[3]
[[画布]]1つに対して [[viewport]] は高々1つです [SRC@en[[[CSS 2.1]] 9.1.1]]。

* 閲覧文脈との関係

[31] [[閲覧文脈]]ごとに[[画布]]があると思われます。

* 複数の表示

[4] [[利用者エージェント]]は[[文書]]を複数の[[画布]]に[[レンダリング]]して[['''構いません''']]。
(つまり、同じ[[文書]]の複数の[[表示]]を提供できます。) [SRC@en[[[CSS 2.1]] 9.1.1]]

[8] [[画布]]それぞれの[[媒体型]]は異なっていても[['''構いません''']]
[SRC@en[[[CSS 2.1]] 7.3]]。

[9] なお、 [CODE(CSS)@en[[[tv]]]] ([[音声]] + [[映像]]) のような [[multimodal media type]]
であっても1つの[[媒体型]]であれば1つの[[画布]]とみなされます。
[SRC@en[[[CSS 2.1]] 7.3]]

* 塗り

[10] [[画布]]上のいろいろなものの[[レンダリング]]の順序 (重ね方)
は[[スタック付け順序]]の概念のもとに規定されています。

** 背景

[13] 
[[HTML文書]]で[[根要素]] [CODE(HTMLe)@en[[[html]]]] の[[算出値]]が
[CODE(CSS)@en[[[background-color]]: [[transparent]]; [[background-image]]: [[none]]]]
の場合、その最初の [CODE(HTMLe)@en[[[body]]]] [[子要素]]の[[算出値]]が[[画布]]に適用されます。
それ以外の場合、[[根要素]]の[[算出値]]が適用されます。
[SRC@en[[[CSS 2.1]] 14.2]]

[14]
[[画布]]に[[背景]]が使用された[[要素]]自体の[[背景]]を再度塗りはしません。
[SRC@en[[[CSS 2.1]] 14.2]]

[15] 
>>13 のいずれの場合であっても、[[背景]]は[[根要素]]だけに関して塗られる場合と同じ位置に[RUBYB[錨付けされます]@en[anchored]]。
([CODE(CSS)@en[[[background-position]]]] の基準になります。)
[SRC@en[[[CSS 2.1]] 14.2]]

[16] [[著者]]は [CODE(HTMLe)@en[[[html]]]] [[要素]]ではなく [CODE(HTMLe)@en[[[body]]]]
[[要素]]に[[背景]]を指定するよう[[推奨]]されています ([[参考]])。
[SRC@en[[[CSS 2.1]] 14.2]]

* 音声画布

[17] 
[[音声]]の[[レンダリング]]に関しては、[[画布]]は[[3次元]][[物理空間]] ([[サラウンド]])
と[[時間的空間]]によって構成されます。
[SRC@en[[[CSS 2.1]] A.2 (参考)]]

* 画布可視域

[18] [[画布]]のうち、[[原点]]を左上隅、何らかの[[レンダリング]]がなされた[[最右]]の点
(または[[原点]]のどちらか右方) を含む[[縦線]]を[[右辺]]、
何らかの[[レンダリング]]がなされた[[最下]]の点
(または[[原点]]のどちらか下方) を含む[[横線]]を[[下辺]]とする領域を、
便宜上[DFN[[RUBYB[画布可視域]@en[canvas visible area]]]]とします。
[[固定配置]]のように [[viewport]] が[[初期包含ブロック]]である[[箱]]は含みません。
[[Viewport]] の[[境界線]]や[[スクロール・バー]]は含みません。

[19]
通常[[利用者]]が [[Webブラウザー]]で[[画布可視域]]以外の[[画布]]を [[viewport]]
を通して見ることはできません。[WEAK[[[スクリプト]]などで[[画布可視域]]外に新たに[[箱]]が配置された場合、[[画布可視域]]が拡張されたと考えます。)

[24] [[CSSOM View]] の用語では[[画布可視域]]は「[DFN[[RUBYB[[[文書内容]]]@en[[[document content]]]]]]」
といいます。

** CSSOM による大きさの取得

*** Firefox

[20]
- [[無奇癖モード]]
-- [CODE(JS)@en[[[document]].[[documentElement]].[[scroll*]]]]
- [[奇癖モード]]
-- [CODE(JS)@en[[[document]].[[body]].[[scroll*]]]]
--- ただし、 [CODE(HTMLe)@en[[[html]]]], [CODE(HTMLe)@en[[[body]]]] の両方が
[CODE(CSS)@en[[[overflow]]]] による[[スクロール・バー]]を持つ場合を除きます。

[23] なお、
[CODE(JS)@en[[[window.scrollMaxX]]]], [CODE(JS)@en[[[window.scrollMaxY]]]]
で[[画布可視域]]の大きさから [[viewport]] [[内容箱]]の大きさを引いたものが出てきます
([[viewport]] が[[画布]]のどこであれ、単純に引いたものです)。

*** Safari

[21]
- [[奇癖モード]]
-- [CODE(JS)@en[[[document]].[[body]].[[scroll*]]]]
- [CODE(JS)@en[[[document.width]]]], [CODE(JS)@en[[[document.height]]]]

*** Opera

[22]
- [[奇癖モード]]
-- [CODE(JS)@en[[[document]].[[body]].[[scroll*]]]]

* 関連

[30] [CODE(HTMLe)@en[[[canvas]]]] [[要素]]とは直接関係ありません。

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)