HTML5 canvas 2

2235 ワード
は、グラフィックを描画するためにScript言語(通常JavaScript)で使用できる新しいHTML要素です.たとえば、図を描いたり、画像を合成したり、簡単な(とそう簡単ではない)アニメーションを作ったりすることができます.右側の画像には、「canvas」の応用例がいくつか示されています.このチュートリアルでは、実装を参照してください.
はアップル(Apple)のMac OS X Dashboardに最初に導入され、Safariに応用された.Gecko 1に基づく.8のブラウザ、例えばFirefox 1.5も、この新しい要素をサポートしています.要素は、WhatWG Webアプリケーション1.0、つまり皆さんご存知のHTML 5標準仕様の一部です.
このチュートリアルでは、自分のWebページで要素を使用する方法について説明してみます.提供された例は、で何ができるかという明確な概念を与えるはずです.これらの例は、を適用する出発点としても使用できます.
使用開始前
要素を使うのは難しくありません.HTMLとJavaScriptの基礎知識があれば.
前述したように、すべての現代ブラウザが<canvas>要素をサポートしているわけではありません.そのため、Firefox 1.5または更新バージョン、または他のGeckoベースのブラウザ、例えばOpera 9、または最近のバージョンのSafariが必要です.
1.Canvasとは何ですか.次のURLはhtml 5 Canvasの完全な定義を見つけることができますhttp://www.whatwg.org/specs/web-apps/current-work/#the-canvasは現在Firefox 2,safariがCanvasを直接サポートしており、IEにはExCanvasのjsコードライブラリ変換が必要です.次のWebサイトでは、ExCanvas[このjsライブラリはarcto()、clip()のサポートを提供していないため、その上の様々なchartコンポーネントに基づいてpie図を天然に生成することはできません]を見つけることができます.http://excanvas.sourceforge.net/MozillaのCanvas入門http://developer.mozilla.org/en/docs/Category:HTML:CanvasMiniovaのCanvas入門http://labs.mininova.org/canvas/ 2.Canvasは何ができるの?(1)MsxシミュレータIt emulates the underlying Z 80 CPU,TMS 9918 Video Display Processor(VDP),PPI,RAM slots and Megaram.In its present form, it should be able to run any program or game developed for MSX 1.0.jsでZ 80などのハードウェアをシミュレートし、rom情報を読み出し、無音ゲームhttp://jsmsxdemo.googlepages.com/jsmsx.html(2)Painterが性能が許せば,Web photoに発展することも可能である. http://caimansys.com/painter/index.html(3)効果水波紋http://timelessname.com/canvas/experiment01/あるあいまいな理論の視覚モデルhttp://timelessname.com/canvas/experiment02/(4)3 D多面体http://www.polyhedra.org/poly/3 DマップMozillaの例としてRayCasterがあります.Canvascape-3 Dwalkerは、上記の例よりも優れており、CSのようなインタフェースも提供しています.http://www.abrahamjoffe.com.au/ben/canvascape/(5)chartアセンブリはWebFx Chart,Flotなどが成形されており,自己探索が必要である. 3.Canvasの開発(1)Canvasコードをflashに変換(porting canvas to flash)http://team.mixmedia.com/index.php?title=porting_canvas_to_flash&more=1&c=1&tb=1&pb=1(2)CanvasをサポートするフレームワークmootoolsはCanvasの呼び出しをサポートし、mochaのmootoolsベースのコンポーネントがフォーム機能を提供する.
HTML 5に基づくcanvasのjsは対象に向かって蛇を貪る
python randomモジュール基本使用