canvas簡単な五子棋盤を描く
1930 ワード
canvasとは
は、HTML 5でグラフィックの描画に使用される要素です.ラベルはグラフィックコンテナにすぎず、canvas要素自体には描画能力がありません.すべてのペイント作業はJavaScriptの内部で完了する必要があります.
Canvas(キャンバス)の概要
1つのキャンバスはウェブページの中で矩形の枠で、要素によって描画される.
注:デフォルトでは、要素には枠線と内容がありません.
簡単な例は次のとおりです.
注意:ラベルは、通常、idプロパティ(スクリプトでよく参照)、widthプロパティ、heightプロパティで定義されたキャンバスのサイズを指定する必要があります.
ケース:15*15の五子棋盤を描く
この例で使用する知識点:
まず、要素を見つけます.
var c=document.getElementById("myCanvas");
次にcontextオブジェクトを作成します.
var ctx=c.getContext("2d");
getContext(「2 d」)オブジェクトは、内蔵のHTML 5オブジェクトで、パス、矩形、円形、文字、画像の追加方法が複数あります.
FillRect(x,y,width,height)法は矩形の現在の充填方式を定義する.
Canvasに線を引くには、次の2つの方法を使用します. moveTo(x,y)定義線開始座標 lineTo(x,y)定義線終了座標 stroke()メソッド線 を描画する
完全なコードを添付します.
は、HTML 5でグラフィックの描画に使用される要素です.ラベルはグラフィックコンテナにすぎず、canvas要素自体には描画能力がありません.すべてのペイント作業はJavaScriptの内部で完了する必要があります.
Canvas(キャンバス)の概要
1つのキャンバスはウェブページの中で矩形の枠で、要素によって描画される.
注:デフォルトでは、要素には枠線と内容がありません.
簡単な例は次のとおりです.
注意:ラベルは、通常、idプロパティ(スクリプトでよく参照)、widthプロパティ、heightプロパティで定義されたキャンバスのサイズを指定する必要があります.
ケース:15*15の五子棋盤を描く
この例で使用する知識点:
まず、要素を見つけます.
var c=document.getElementById("myCanvas");
次にcontextオブジェクトを作成します.
var ctx=c.getContext("2d");
getContext(「2 d」)オブジェクトは、内蔵のHTML 5オブジェクトで、パス、矩形、円形、文字、画像の追加方法が複数あります.
FillRect(x,y,width,height)法は矩形の現在の充填方式を定義する.
Canvasに線を引くには、次の2つの方法を使用します.
完全なコードを添付します.
<style type="text/css">
.chessboard{
display:block;
margin:50px auto;
}
</style>
<script>
function drawChessBoard () {
var c=document.getElementById("mycanvas");
context=c.getContext("2d");
context.fillRect(15,435,15,435);
for(var i = 0; i < 15; i++){
context.moveTo(15 + i * 30 , 15);
context.lineTo(15 + i * 30 , 435);
// 15 ， 30px
context.stroke();
context.moveTo(15 , 15 + i * 30);
context.lineTo(435 , 15 + i * 30);
// 15 ， 30px
context.stroke();
}
}
</script>
<canvas id="mycanvas" width="450px" height="450px" class="chessboard"/>
</code></pre>
<p style="margin-left:0cm;"> </p>
</div>
</div>
</div>
</div>