* [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[[[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

[42]
[CITE[Working with the WebKit Nightly Builds]] <http://developer.apple.com/opensource/internet/nightlywebkit.html>
([[名無しさん]] [WEAK[2006-11-05 02:47:03 +00:00]])

[43]
[CITE[Surfin’ Safari - Blog Archive &#187; Understanding HTML, XML and XHTML]] <http://webkit.org/blog/?p=68>
([[名無しさん]])

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

[55]
[CITE[Christian Simms’s Weblog &#187; Blog Archive &#187; SVG vs. Canvas: Tastes Great, or Less Filling?]] ([CODE[2007-03-15 09:20:22 +09:00]] 版) <http://csimms.botonomy.com/2006/02/12/svg-vs-canvas-tastes-great-or-less-filling/>
([[名無しさん]])

[[#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]])

[29]
[CITE[The 'Opera-2dgame' Canvas Context - Web Applications Blog - by Web Applications]] <http://my.opera.com/WebApplications/blog/show.dml/200788>
([[名無しさん]] [WEAK[2006-03-31 02:15:54 +00:00]])

[30]
[CITE[ExplorerCanvas]] <http://excanvas.sourceforge.net/>
([[名無しさん]] [WEAK[2006-05-27 03:52:48 +00:00]])

[31]
[CITE[Canvas tutorial - MDC]] <http://developer.mozilla.org/en/docs/Canvas_tutorial>
([[名無しさん]] [WEAK[2006-05-27 03:53:13 +00:00]])

[32]
[CITE[SVG & Canvas: Graphics for the Web]] <http://people.mozilla.com/~vladimir/xtech2006/>
([[名無しさん]] [WEAK[2006-05-27 03:53:32 +00:00]])

[33]
[CITE[Taken SPC : カテゴリー : canvas]] <http://taken.s101.xrea.com/blog/category.php?k=canvas>
([[名無しさん]])

[34]
[CITE[SourceForge.jp: Project Info - WebGL]] <http://sourceforge.jp/projects/webgl/>
([[名無しさん]])

[35]
[CITE[Taken SPC : canvas 要素のサンプル]] <http://taken.s101.xrea.com/blog/var/canvas/>
([[名無しさん]])

[36]
[CITE[Canvas shell]] <http://mozilla.doslash.org/stuff/canvas/shell.html>
([[名無しさん]])

[37]
[CITE[Canvex - canvas-based FPS game]] <http://canvex.lazyilluminati.com/>
([[名無しさん]])

[38]
[CITE[Paintr 2.1 Beta]] <http://annevankesteren.nl/2006/08-paintr21>
([[名無しさん]] [WEAK[2006-08-29 23:31:25 +00:00]])

[39]
[CITE[Taken SPC : Mozilla が canvas3d を実装]] <http://taken.s101.xrea.com/blog/article.php?id=629>
([[名無しさん]] [WEAK[2006-09-10 03:51:46 +00:00]])

[40]
[CITE[Perf-o-matic]] <http://graphs.mozilla.org/>
([[名無しさん]] [WEAK[2006-09-25 23:25:53 +00:00]])

[41]
[CITE[New Canvas Script]] <http://abrahamjoffe.com.au/ben/opera_canvas_bugs/index.htm>
([[名無しさん]] [WEAK[2006-10-01 00:33:32 +00:00]])

[44]
[CITE[Graraph - mz.skr.jp]] <http://mz.skr.jp/graraph/>
([[名無しさん]])

[45]
[CITE[Rhino Canvas]] <http://rhino-canvas.sourceforge.net/www/drawstring.html>
([[名無しさん]] [WEAK[2006-11-14 00:07:56 +00:00]])

[46]
[CITE[Rhino Canvas]] <http://rhino-canvas.sourceforge.net/>
([[名無しさん]] [WEAK[2006-11-14 00:09:07 +00:00]])

[48]
[CITE@ja[Bug 5522 - '''['''canvas''']'''transform, setTransform の実装]] ([CODE[2007-02-05 08:56:08 +09:00]] 版) <http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=5522>
([[名無しさん]] [WEAK[2007-02-04 23:59:39 +00:00]])

[49]
[CITE[Bug 365886 &#8211; Implement canvas transform() and setTransform()]] ([CODE[2007-02-05 08:58:17 +09:00]] 版) <https://bugzilla.mozilla.org/show_bug.cgi?id=365886>
([[名無しさん]] [WEAK[2007-02-05 00:00:54 +00:00]])

[50]
[CITE[Bug 365886 &#8211; Implement canvas transform() and setTransform()]] ([CODE[2007-02-05 08:58:17 +09:00]] 版) <https://bugzilla.mozilla.org/show_bug.cgi?id=365886>
([[名無しさん]] [WEAK[2007-02-05 00:01:15 +00:00]])

[51]
[CITE[X3D Community Blog: 3D capable <canvas> HTML Tag by Opera & Mozilla]] ([CODE[2007-02-10 18:45:10 +09:00]] 版) <http://www.web3d.org/community/blog/archives/2006/10/3d_capable_canvas_html_tag_by/>
([[名無しさん]])

[52]
[CITE[canvas 3D - Anne’s Weblog]] ([CODE[2006-05-21 17:08:54 +09:00]] 版) <http://annevankesteren.nl/2006/05/canvas-3d>
([[名無しさん]])

[53]
[CITE@en[Vector graphic animation with JavaScript | ara pehlivanian―Web Standards, Web Culture, Web Everything.&#8482;]] ([CODE[2007-02-24 16:11:17 +09:00]] 版) <http://arapehlivanian.com/2007/02/19/vector-graphic-animation-with-javascript/>
([[名無しさん]] [WEAK[2007-02-24 07:12:26 +00:00]])

[54]
[CITE@ja[地図とHTML Canvas - Torisugari の日記]] ([CODE[2007-03-07 13:38:22 +09:00]] 版) <http://slashdot.jp/~Torisugari/journal/395817?from=rss>
([[名無しさん]] [WEAK[2007-03-07 12:23:07 +00:00]])

[56]
[CITE[A blog? with Σαιτω - CANVAS - Apple が特許を主張]] ([CODE[2007-03-16 15:17:30 +09:00]] 版) <http://d.hatena.ne.jp/saiton/20070316/1174010163>
([[名無しさん]] [WEAK[2007-03-16 08:58:21 +00:00]])

[57]
[CITE@en[I see a shitstorm coming - Arve Bersvendsen]] ([CODE[2007-03-16 07:58:13 +09:00]] 版) <http://virtuelvis.com/archives/2007/03/shitstorm-coming>
([[名無しさん]] [WEAK[2007-03-16 09:04:31 +00:00]])

[58]
[CITE@en[I see a shitstorm coming - Arve Bersvendsen]] ([CODE[2007-03-16 07:58:13 +09:00]] 版) <http://virtuelvis.com/archives/2007/03/shitstorm-coming>
([[名無しさん]] [WEAK[2007-03-16 09:10:17 +00:00]])

[59]
[CITE@en[I see a shitstorm coming - Arve Bersvendsen]] ([CODE[2007-03-16 07:58:13 +09:00]] 版) <http://virtuelvis.com/archives/2007/03/shitstorm-coming>
([[名無しさん]] [WEAK[2007-03-16 09:12:09 +00:00]])

[60]
[CITE@ja[【レポート】JavaScript + Canvasでレイトレを! - "Flog.RayTracer Canvas"の使い心地 (MYCOMジャーナル)]] ([CODE[2007-03-21 12:27:55 +09:00]] 版) <http://journal.mycom.co.jp/articles/2007/03/19/flog/>
([[名無しさん]] [WEAK[2007-03-21 03:29:29 +00:00]])

[61]
[CITE[A blog? with Σαιτω - canvas のデモ]] ([CODE[2007-03-21 01:22:01 +09:00]] 版) <http://d.hatena.ne.jp/saiton/20070320/1174360479>
([[名無しさん]])

[62]
[CITE[Canvas Raytracer @ Flog]] ([CODE[2007-03-11 17:55:54 +09:00]] 版) <http://labs.flog.co.nz/raytracer/>
([[名無しさん]])

[63]
[CITE@ja[【レポート】Canvas 3D Renderer & 3D WalkerでHTML Canvasの実力を知る (MYCOMジャーナル)]] ([CODE[2007-03-21 12:29:14 +09:00]] 版) <http://journal.mycom.co.jp/articles/2007/03/06/canvas/>
([[名無しさん]])

[64]
[CITE[Canvas tests - index]] ([CODE[2007-03-26 07:06:38 +09:00]] 版) <http://canvex.lazyilluminati.com/tests/tests/>
([[名無しさん]] [WEAK[2007-03-28 07:04:07 +00:00]])

[65]
[CITE[Latest topics > 多数のHTML Canvasを使用する時の、反応速度向上テクニック - outsider reflex]] ([[Piro(SHIMODA Hiroshi)]] 著, [CODE[2007-04-04 08:43:36 +09:00]] 版) <http://piro.sakura.ne.jp/latest/blosxom/mozilla/xul/2007-04-03_tabcatalog.htm>
([[名無しさん]] [WEAK[2007-04-03 23:46:42 +00:00]])

[66]
[CITE[Racing]] ([CODE[2007-02-27 12:26:31 +09:00]] 版) <http://tapper-ware.net/canvas3d/>
([[名無しさん]] [WEAK[2007-04-12 12:56:42 +00:00]])

[67]
[CITE[canvas-developers : Message: Re: Apple is asserting it's IP rights over canvas - what does that mean for canv]] ([CODE[2007-04-14 10:10:04 +09:00]] 版) <http://tech.groups.yahoo.com/group/canvas-developers/message/371>
([[名無しさん]] [WEAK[2007-04-14 01:12:47 +00:00]])

[68]
[CITE@en[canvas Support in Opera]] ([CODE[2007-05-01 10:47:19 +09:00]] 版) <http://www.opera.com/docs/specs/canvas/>
([[名無しさん]] [WEAK[2007-05-01 02:01:58 +00:00]])

[69]
[CITE[ExplorerCanvas]] ([CODE[2006-03-31 09:37:29 +09:00]] 版) <http://excanvas.sourceforge.net/>
([[名無しさん]] [WEAK[2007-05-05 23:29:46 +00:00]])

[70]
[CITE@ja[グラフを描く(canvas編)]] ([CODE[2007-05-05 22:18:48 +09:00]] 版) <http://oku.edu.mie-u.ac.jp/~okumura/javascript/graph-canvas.html>
([[名無しさん]] [WEAK[2007-05-05 23:30:39 +00:00]])

[71]
[CITE@en[PlotKit - Javascript Chart Plotting | liquidx]] ([CODE[2007-05-07 20:26:05 +09:00]] 版) <http://www.liquidx.net/plotkit/>
([[名無しさん]] [WEAK[2007-05-07 11:33:48 +00:00]])

[[#comment]]


* メモ

[47]
[CITE@ja[JavaScriptで図形を描くHTML要素「Canvas」の実例 - GIGAZINE]] ([CODE[2007-01-13 01:27:39 +09:00]] 版) <http://gigazine.net/index.php?/news/comments/20070111_canvas/>
([[名無しさん]] [WEAK[2007-01-12 17:02:04 +00:00]])

[72]
[CITE[]] ([TIME[2005-05-25 19:04:44 +09:00]] 版) <http://www.sylloge.com/5k/entries/232/domaze5k.htm>

[CODE(HTMLe)@en[[[canvas]]]] を使わないこれもこれですごい。
([[名無しさん]])