タグに<canvas> HTML5

新しいタグはタグに<canvas> HTML5は、描画やグラフィックスを操作するために使用することができる以前のバージョンで存在していないです。

タグの<canvas>は適切に機能し、完全にその可能性を実行するためにJavaScriptなどのスクリプト言語のサポートを、必要がある。

この記事の目的は、新しいタグの基本的な使用方法を説明することですが、実用的な例の定数を使用することで高度ないくつかの点は、私は願って、学習を促進するだろう。

前提

最高のキャンバスの絶対的な新規性、すべてのブラウザがサポートされていないので、この記事のデモサンプルが正しく表示されない可能性があります。
テストは何か問題を経験していないいるGoogle Chromeは、で行った。

タグ<canvas>を使用

Canvasタグの一般的な用途は、非常にシンプルで他のHTMLタグと違いは。
正式にキャンバスがシンプルなコンテナですと、そのように、開始タグ（<canvas>は）と終了（</キャンバス>を）持っています。

 <canvas id="esempio" width="196" height="96">

 





要素がサポートされていません







 </キャンバス>

寸法が明示的に示されていない場合（属性の幅と高さを使用して）コンテナに割り当てられているサイズは、デフォルト、高さ300と150の基本的な矩形です。
id属性は 、もちろん、必須ではないが、私の考えで、それは常にページ上で使用されている各オブジェクトの一意の参照を持つように呼び出すことをお勧めです。

グラフィックがブラウザでサポートされていない場合に注意を表すために<canvas>と</キャンバス>でテキスト部分の区切りを示します。

実装の詳細を開始する前に住んでテストする簡単なコードを使用してキャンバスの可能性をテストします。

 <canvas id="bandierina" width="180">高さ="100"> </ Canvasのサポートされていません>







 <script type="text/javascript">







 VARキャンバス=のdocument.getElementById（'フラグ'）;







 VAR C = canvas.getContext（'2 D'）;







 c.fillStyle ='＃FF0000';







 c.fillRect（0,0,180,100）;







 c.fillStyle ='＃FFFFFF';







 c.fillRect（0,0,120,100）;







 c.fillStyle ='＃00FF00';







 c.fillRect（0,0,60,100）;







 </ SCRIPT>

上このページは（正しく出力を確認するには、あなたが、もう一度、HTML 5をサポートするブラウザを持っている必要があります）このコードの結果を見ることができます。

すでにコードのこのセクションの資料の冒頭に発表されたようにキャンバスの仕事はスクリプトを使用している明示的な事実です。 この例から、我々は即座にオブジェクトのキャンバスの背景変数を抽出するための標準的な方法を注意することができます。

 / / IDでキャンバスのアイテムを作成する







 VARキャンバス=のdocument.getElementById（'フラグ'）;









 / /キャンバス上で新しい2次元のオブジェクトを作成します。







 VAR C = canvas.getContext（'2 D'）;

Javascriptの getElementByIdメソッドでは、idフィールドの値によって、変数キャンバスにオブジェクトを格納します。GetContextメソッドは、（'2 d'）のコンテキスト、またはプログラマのようにキャンバスを操作するメソッドの数を提供するオブジェクトを受け取ります（私たちのケースでは、2次元グラフィックス関数で動作するようにしたい、すなわち、2D）希望。

以下のページでは、プログラマに役立ついくつかの基本的な操作は、キャンバスの使用をしようとする一覧表示されます。

• <<
• 1
• 2
• 3
• 4
• 5
• >>