[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]]''' --[27] [CSECTION@en[9.1.1 The viewport]] --[28] [CSECTION@en[14.2 The background]] --[29] [CSECTION@en[A.2 Introduction to aural style sheets]] ]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]]]] [[要素]]とは直接関係ありません。