* [CODE(HTMLe)@en[[[canvas]]]] 要素型 (HTML)

[8]
[[HTML]]の[DFN[[CODE(HTMLe)@en[[[canvas]]]][[要素]]]]は、[[Web応用]]が[[図形]]を描くことができる、[[解像度]]依存の[[ビットマップ]][RUBY[[[画布]]] [キャンバス]]です。[[グラフ]]、[[ゲーム]]その他の[[画像]]を[[実行時]]に描画することを想定しています。

@@ '''この頁は書きかけです。 [[HTML 5]] の仕様が確定するのを待っています。'''

[9] 仕様書:
- [[HTML 5]] ([[作業中]])
-- <http://www.whatwg.org/specs/web-apps/current-work/#canvas>

[10]
:状態:[[WHAT]] 仕様案
:[[開始タグ]]:必須
:[[終了タグ]]:必須 (>>6)
:[[DOM界面]]:[CODE(DOMi)@en[[[DOMCanvasElement]]]]
:[[属性]]:[[共通属性]]に加えて:
,属性名	,属性値	,既定値	,説明	,状態	,出典
,[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

[[#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 以降) も相次いでこれを実装しました。

[[#comment]]


** 関連

[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]]]]の方がよさそうなもの:
- [[手書き入力]]の描画部
- [[モンテカルロ法]]の図示
- [[速度]]が求められる[[ゲーム]]

[[#comment]]


** メモ

[1]
''Hixie's Natural Log: Extending HTML'' <http://ln.hixie.ch/?start=1089635050&count=1>

[[Apple]] が導入した [[HTML]] の拡張、
[CODE(HTMLe)[canvas]] 要素型などを通した、 HTML の拡張についての考察。
([[名無しさん]] [WEAK[2004-08-23 06:30:29 +00:00]])

[2]
[CITE[mozillaZine 日本語版 - mozillaZine 和訳]] <http://ryuzi.dyndns.org/mozillazine/html/modules/news/article.php?storyid=1017>

[[Gecko]] が [CODE(HTMLe)[[[canvas]]]]
を実装。
([[名無しさん]] [WEAK[2005-04-23 01:01:00 +00:00]])

[3]
[CITE[Evil Thoughts: Canvas and XUL]] <http://pavlov.net/blog/archives/2005/04/canvas_and_xul.html>
([[名無しさん]] [WEAK[2005-04-23 01:02:46 +00:00]])

[4]
[CITE[Drawing Graphics with Canvas - Devmo Ja]] <http://developer.mozilla.org/ja/docs/Drawing_Graphics_with_Canvas>

[CITE@en[Category:HTML:Canvas - MDC]] 
<http://developer.mozilla.org/ja/docs/Category:HTML:Canvas>

[7]
[CITE[blogfour: <canvas> support for IE]] <http://www.beaufour.dk/blog-archives/2005/06/canvas_support.html>
([[名無しさん]] [WEAK[2005-08-23 00:25:26 +00:00]])

[14]
[CITE[ブラウザ上でお絵かき: Days on the Moon]] <http://nanto.asablo.jp/blog/2005/09/27/89628>
([[名無しさん]] [WEAK[2005-11-18 13:28:02 +00:00]])

[15]
[CITE[Bug 288714 - HTML canvas impl]] <https://bugzilla.mozilla.org/show_bug.cgi?id=288714>
([[名無しさん]])

[21]
[CITE[Emil’s Chronicle &#187; Canvas in IE]] <http://me.eae.net/archive/2005/12/29/canvas-in-ie/>

[[HTC]]による実装。
([[名無しさん]] [WEAK[2006-01-04 01:09:27 +00:00]])

[22]
[CITE[Canvascape - 3D walker]] <http://www.abrahamjoffe.com.au/ben/canvascape/index.htm>

[[3D]][[迷路]]すげー
([[名無しさん]] [WEAK[2006-01-31 07:04:19 +00:00]])

[24]
[CITE[canvas-developers : Canvas Developers]] <http://groups.yahoo.com/group/canvas-developers/>
([[名無しさん]] [WEAK[2006-03-28 00:10:11 +00:00]])

[25]
[CITE[Canvas:3D - MozillaWiki]] <http://wiki.mozilla.org/Canvas:3D>
([[名無しさん]] [WEAK[2006-03-28 00:11:18 +00:00]])

[26]
[CITE[Canvas:Text - MozillaWiki]] <http://wiki.mozilla.org/Canvas:Text>
([[名無しさん]] [WEAK[2006-03-28 00:14:20 +00:00]])

[27]
[CITE[XUL:Canvas Tag - MozillaWiki]] <http://wiki.mozilla.org/XUL:Canvas_Tag>
([[名無しさん]])


[28]
[CITE[Vladimir Vuki&#263;evi&#263; &#187; Canvas Future]] <http://blog.vlad1.com/archives/2006/03/03/95/>
([[名無しさん]] [WEAK[2006-03-28 00:17:12 +00:00]])


[[#comment]]


* メモ