HTML5キャンバスあなたは、2Dグラフィックスを使用することができます非常にクールな効果を達成するために、すべての着信キャンバス（帆布）は、ゲーム開発のために使用され、低いバージョン、すなわちサポートされていません
注意：
300高さ：150デフォルトサイズはである1.canvas
2.お使いのブラウザはキャンバスをサポートしていない場合は、ブラウザがキャンバスタグの内容を表示しますが、効果が描かれたキャンバスを実行しません。
3.canvas線要素であります
4.canvasはプロパティにのみラベルの幅と高さによって提供される実施形態とき、スタイルCSSの高さと幅によって提供することができない、JSによって提供することができない、すなわちcanvas.style.height /幅、ラベルを介してその画像の幅と高さは、キャンバスを描くストレッチします設定
サイズは、キャンバスのプロパティに直接提供してもよいです
HTML部分：
<上記のid =の上にキャンバス「キャンバス」幅= 「400 」高さ= 「400 」お使いのブラウザは低すぎるバー</キャンバス>のために急いでキャンバスをサポートしていません>
JS一部：
①買収キャンバス
VARキャンバス=のdocument.getElementById（' キャンバス'）;
②キャンバスにキャンバスにブラシを作成します
VAR CTX = canvas.getContext（" 2D "）。
③（頭から再びキャンバスに）新しいパスを開始
ctx.beginPath（）;
④開始位置
ctx.moveTo（0、0）;
⑤線幅の設定
ctx.lineWidth = 2。
⑥色子供ブラシストロークセット
ctx.strokeStyle = 「赤」。
⑦ 四角形を描画するためのlineTo（横軸、縦軸）の交差線を描画開始
ctx.lineTo（400、0 ）; ctx.lineTo（400、400 ）。 ctx.lineTo（0、400 ）; ctx.lineTo（0、0）;
⑧実行ドロー
ctx.stroke（）;
結果は以下の通りであります：
⑨ 電流経路をクローズ（閉じていない場合、そのような色のペン、ペン幅、等のコードカバレッジ、後に前のコード）。
ctx.closePath（）;
⑩ 現在の図面を保存
ctx.save（）;
エンド・エンド
我々は内部にあり、その後の正方形を描きます
ctx.beginPath（）; ctx.moveTo（ 100、100 ）。 ctx.lineWidth = 2 。 ctx.strokeStyle =「グリーン」。 ctx.lineTo（ 100、300 ）。 ctx.lineTo（ 300、300 ）。 ctx.lineTo（ 300、100 ）。 ctx.lineTo（ 100、100 ）。 ctx.stroke（）;
あなたが閉じた図形を描画した場合、我々は満たされていてもよいです
セット塗りつぶしの色：
ctx.fillStyle =「黄色」。
中綿：
ctx.fill（）;
結果は以下の通りであります：
最後のステップ：
クリアキャンバス、我々はまた、キャンバスの一部を削除することができますキャンバス全体をクリアすることができます
クリアキャンバス部分：
クリアキャンバスclearRectの部分（X、Y、最後までX、 エンドそのY ）。
X：X部分クリアする左上隅の座標
Yを、Yは部分をクリアする左上隅の座標
ctx.clearRect（0、0、400、200）。
結果は以下の通りである：私は、キャンバスの上半分をクリアするためにここにいます
また、キャンバス全体clearRect（0、0、キャンバス、キャンバス高の幅）をクリアすることができます。
ctx.clearRect（0、0、400、400）。
ここではキャンバス全体がクリアされます
ハッピーエンド！
線幅の設定