* [CODE(HTMLe)@en[[[canvas]]]] 要素型 (HTML)
[8]
[[HTML]]の[DFN[[CODE(HTMLe)@en[[[canvas]]]][[要素]]]]は、[[Web応用]]が[[図形]]を描くことができる、[[解像度]]依存の[[ビットマップ]][RUBY[[[画布]]] [キャンバス]]です。[[グラフ]]、[[ゲーム]]その他の[[画像]]を[[実行時]]に描画することを想定しています。
@@ '''この頁は書きかけです。 [[HTML 5]] の仕様が確定するのを待っています。'''
[9] 仕様書:
- [[HTML 5]] ([[作業中]])
--
[10]
:状態:[[WHAT]] 仕様案
:[[開始タグ]]:必須
:[[終了タグ]]:必須 (>>6)
:[[DOM界面]]:[CODE(DOMi)@en[[[HTMLCanvasElement]]]]
:[[属性]]:[[共通属性]]に加えて:
,属性名 ,属性値 ,既定値 ,説明 ,状態 ,出典
,[CODE(HTMLa)@en[[[alt]]]] ,[CODE(SGML)@en[%[[Text]]]] ,(なし) ,[[代替文]] ,"非標準, 時代遅れ → [[内容]]" ,[Apple]
,[CODE(HTMLa)@en[[[height]]]] ,[CODE(ABNF)@en[1*[[DIGIT]]]] ,[CODE(HTML)[150]] ,[[座標空間]]高 ,[[WHAT]] 仕様案 ,[HTML5]
,[CODE(HTMLa)@en[[[width]]]] ,[CODE(ABNF)@en[1*[[DIGIT]]]] ,[CODE(HTML)[300]] ,[[座標空間]]幅 ,[[WHAT]] 仕様案 ,[HTML5]
** 内容と終了タグ
[6] '''終了タグ'''
当初 [[Safari]] の実装では[[強制空要素]]で、
[[終了タグ]]はありませんでしたが、 [[HTML 5]]
では[[終了タグ]]が存在し、[[内容]]は[[代替内容]]とされています。
[[Firefox]]、[[Opera]] もこれに従っています。
@@ [[Safari 2]] は??
[16] '''代替内容'''
[[著者]]は、[[画布]]と機能・目的が同じ代わりのものも用意するべきです。
その代替物は [CODE(HTMLe)@en[[[canvas]]]][[要素]]の[[内容]]とすることができます。
;; [[代替内容]]の[[レンダリング]]: >>17
[416] [[canvasフォールバック内容]]の項を参照。
[42]
[CITE[Working with the WebKit Nightly Builds]]
([[名無しさん]] [WEAK[2006-11-05 02:47:03 +00:00]])
[43]
[CITE[Surfin’ Safari - Blog Archive » Understanding HTML, XML and XHTML]]
([[名無しさん]])
[[#comment]]
** レンダリング
[17] '''代替内容'''
- [[視覚]][[媒体]]で[[スクリプト]]が有効なら、[[置換ブロック水準要素]]として[[レンダリング]]するべきです。[[内容]]は[[レンダリング]]しません。
- それ以外の場合は、通常の[[ブロック水準要素]]として[[内容]]も[[レンダリング]]するべきです。
- 前者から後者へ移す場合 (例えば対話的画面に表示した[[文書]]を[[印刷]]する場合)
は、元の[[画像]]と[[大きさ]]を持った[[置換ブロック水準要素]]として[[レンダリング]]するべきです。
[18] '''大きさと座標空間'''
- [[座標空間]]は、[CODE(HTMLa)@en[[[width]]]][[属性]]と[CODE(HTMLa)@en[[[height]]]][[属性]]によって大きさが決まります。[[既定値]]はそれぞれ[CODE(HTML)[300]]と[CODE(HTMLa)[150]]です。
- [[CSS]]で[[置換要素]]の[[大きさ]]として使われる[[内在次元]]の大きさは、[[座標空間]]の大きさに[[CSS]]の[[単位]][CODE(CSS)@en[[[px]]]]を付けた[[値]]となります。
- [[CSS]][[画布]]上の[CODE(HTMLe)@en[[[canvas]]]][[要素]]の大きさは、[[CSS]]の[[特性]]の指定と[[内在次元]]に基づいて決まります。[[座標空間]]の大きさと関係なく拡大・縮小できます。
- [[利用者エージェント]]が内部で保持するデータの大きさ([[解像度]])は、[[利用者エージェント]]の実装と[[媒体]]の性質で決めます。1つの[[CSS]][[画素]]が複数の[[装置]][[画素]]であらわされる[[媒体]]では、それ相応の細かさで記述されたデータを内部で持つことになります。
[19] [CODE(HTMLa)@en[[[width]]]][[属性]]と[CODE(HTMLa)@en[[[height]]]][[属性]]は[[動的]]に書き換えられますが、その場合[[画布]]は初期状態に再設定(描画内容は消去)されます。
[20] '''背景'''
初期状態では、[[背景]]は[[黒]]の[[透明]]([CODE(CSS)@en[[[rgba]](0, 0, 0, 0)]])になります。[[CSS]]の[[背景]]も、その更に後ろに通常通り[[レンダリング]]されます。
[[#comment]]
** 歴史
[11]
はじめ、 [[Apple]] が [[Safari]] に (主として [[Dashboard]]
のために) [CODE(HTMLe)@en[[[canvas]]]] を考案・実装しました。
[12]
[[WHATWG]] の [[Web Applications 1.0]] 作業原案 ([[HTML 5]])
ははやくから [CODE(HTMLe)@en[[[canvas]]]] を仕様に取り込んでいます。
[13]
[[Gecko]] 1.8 ([[Firefox]] 1.5 ([[Deer Park]] 2 以降))、 [[Opera 9]]
(Preview 1 以降) も相次いでこれを実装しました。
[312] [[HTML5]] の中ではじめて Status が「Implemented and widely deployed」 ([[勧告]]相当)
に到達しました。
;; 当時はまだ [[HTML4]] 以来の機能に status が設定されていませんでした。
** 関連
[18] '''他に適当な要素型がないか'''
他に適当な[[要素型]]があるときに[CODE(HTMLe)@en[[[canbas]]]]を使うのは不適切です。例えば、[[見出し]]を凝った装飾付き文字にしたい時は、[CODE(HTMLe)@en[[[h1]]]]で[[マーク付け]]し、装飾は[[CSS]]と[[XBL]]で行うべきです。
[5] '''[CODE(HTMLe)@en[canvas]] vs SVG'''
, ,[CODE(HTMLe)@en[canvas]] ([CODE(HTML)@en[[[2d]]]]) ,[[SVG]]
,記述方法 ,[[スクリプト]]で[[手続き的]] ,[[XML]] で[[宣言的]]
,文字列の描画 ,× ,○
,動的な変更 ,○ ([[スクリプト]]) ,"○ ([[スクリプト]], [[アニメーション]])"
,描画の [[DOM]] への反映 ,× ,○
,[[CSS]] ,× ,○
,[[HTML]] に埋込み ,○ ([CODE(HTMLe)@en[canvas]] + [CODE(HTMLe)@en[[[script]]]]) ,×
,[[XHTML]] に埋込み ,○ ([CODE(HTMLe)@en[canvas]] + [CODE(HTMLe)@en[[[script]]]]) ,○ ([CODE(XMLe)@en[[[svg]]]])
,[[HTML]] から参照 ,○ ([CODE(HTMLe)@en[canvas]] + [CODE(HTMLe)@en[[[script]]]] [CODE(HTMLa)@en[[[src]]]]) ,○ ([CODE(HTMLe)@en[[[object]]]])
,[[XHTML]] から参照 ,○ ([CODE(HTMLe)@en[canvas]] + [CODE(HTMLe)@en[[[script]]]] [CODE(HTMLa)@en[[[src]]]]) ,○ ([CODE(HTMLe)@en[[[object]]]])
,[[ラスタ画像]]データに変換 ,○ ([CODE(DOMm)@en[[[toDataURL]]]]) ,△
,標準化団体 ,[[WHATWG]] ,[[W3C]] [[SVG WG]]
,[[Mozilla Firefox]] ,1.5 Alpha 2 以降 ,1.5 Alpha 2 以降 (一部のみ)
,[[Safari]] ,○ ,○
,[[Opera]] ,9.0 Preview 1 以降 ,8 以降 ([[SVG Tiny]])
,[[携帯電話]] ,× ,○ ([[SVG Tiny]])
[23]
[[SVG]]より[CODE(HTMLa)@en[[[canvas]]]]の方がよさそうなもの:
- [[手書き入力]]の描画部
- [[モンテカルロ法]]の図示
- [[速度]]が求められる[[ゲーム]]
[55]
[CITE[Christian Simms’s Weblog » Blog Archive » SVG vs. Canvas: Tastes Great, or Less Filling?]] ([CODE[2007-03-15 09:20:22 +09:00]] 版)
([[名無しさん]])
[[#comment]]
** メモ
[1]
''Hixie's Natural Log: Extending HTML''
[[Apple]] が導入した [[HTML]] の拡張、
[CODE(HTMLe)[canvas]] 要素型などを通した、 HTML の拡張についての考察。
([[名無しさん]] [WEAK[2004-08-23 06:30:29 +00:00]])
[2]
[CITE[mozillaZine 日本語版 - mozillaZine 和訳]]
[[Gecko]] が [CODE(HTMLe)[[[canvas]]]]
を実装。
([[名無しさん]] [WEAK[2005-04-23 01:01:00 +00:00]])
[3]
[CITE[Evil Thoughts: Canvas and XUL]]
([[名無しさん]] [WEAK[2005-04-23 01:02:46 +00:00]])
[4]
[CITE[Drawing Graphics with Canvas - Devmo Ja]]
[CITE@en[Category:HTML:Canvas - MDC]]
[7]
[CITE[blogfour: