画布

画布 (CSS)

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

目次

  1. 仕様書
  2. 媒体との関係
  3. 大きさ
  4. Viewport との関係
  5. 閲覧文脈との関係
  6. 複数の表示
  7. 塗り
    1. 背景
  8. 音声画布
  9. 画布可視域
    1. CSSOM による大きさの取得
      1. Firefox
      2. Safari
      3. Opera
  10. 関連

仕様書#

媒体との関係#

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

大きさ#

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

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

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

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

[12] 初期包含ブロック画布原点錨付けされています (anchored) CSS 2.1 10.1

Viewport との関係#

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

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

閲覧文脈との関係#

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

複数の表示#

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

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

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

塗り#

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

背景#

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

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

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

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

音声画布#

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

画布可視域#

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

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

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

CSSOM による大きさの取得#

Firefox#

[20]

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

Safari#

[21]

Opera#

[22]

関連#

[30] canvas 要素とは直接関係ありません。