HTML 5 cavansの使用

一、Canvasとは何ですか.
Canvasはキャンバスで、どんな線を描くか、図形を描くか、充填するかなどの一連の操作を行うことができ、操作する絵はjsなので、jsを薬を飲むほどプログラミングさせた.またCanvasは単純な2次元ベクトル描画だけでなく、3次元の描画や画像処理など一連のapiサポートも提供しています.
二、Canvasは中の重要な要素contextである
(1)Canvasを使用してグラフィックを描画するには、ページにCanvasのラベルを追加する必要があります.たとえば、<canvas id="demoCanvas" width="500" height="500"> <p> ， ， html5 ， ie6 ？</p> </canvas>(2)はもちろん上のラベルだけで、キャンバスを作成することしかできません.widthプロパティとheightプロパティはキャンバスのサイズを設定します.Idプロパティも必要で、後でIdで現在のCanvasのDomオブジェクトを取得します.このCanvaseのDomオブジェクトによって彼のコンテキストを取得することができ、Canvasの描画図形はすべてCanvasオブジェクトに依存するコンテキストオブジェクトである.コード:<script type="text/javascript">
// ： canvas
var canvasDom = document.getElementById("demoCanvas");
// ：
var context = canvasDom.getContext('2d');
</script>(3)Contextコンテキストのデフォルトの2つの描画方法:1つ目:描画線(stroke)、2つ目:塗りつぶし:fill.注:どの方法を使用するかを決定した後、線を塗りつぶしたり描画したりする前にスタイルを設定します.三、一例を示します.
Canvasペイントの全体的な手順
HTMLページを作成し、キャンバスラベルを設定する
jsを記述し、キャンバスdomオブジェクトを取得する
CanvasタグのDomオブジェクトからコンテキストを取得
ドラフト線スタイル、色を設定します.
長方形を描画するか、長方形を塗りつぶします.
コード:< body >      < canvas   id="demoCanvas" width="500" height="500">          < p > ， ， html5 ， ie6 ？</ p >      </ canvas >      <!--- demo--->      < script   type="text/javascript">                     // ： canvas          var canvasDom = document.getElementById("demoCanvas");          // ：          var context = canvasDom.getContext('2d');          // ： 、          context.strokeStyle = "red";          // ： ， 。          context.strokeRect(10, 10, 190, 100);                    // 。          context.fillStyle = "blue";          context.fillRect(110,110,100,100);      </ script > </ body >