このようなブロックをCanvas内で描写します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>square</title>
<script>
var canvas;
var ctx;
//四角の一辺の長さ
var SIDE = 20;
//ブロックの描写用に配列を用意する
var OBJECT = [
[1, 1, 0, 0],
[0, 1, 1, 0]
];
window.onload = function(){
canvas = document.querySelector("#canvas");
ctx = canvas.getContext("2d");
draw();
};
//四角を描く
function draw(){
ctx.strokeStyle = "blue";
for ( var y = 0; y < 2; y++) {
for ( var x = 0; x < 4; x++) {
if ( OBJECT[y][x] ) {
ctx.strokeRect(x * SIDE, y * SIDE, SIDE, SIDE);
}
}
}
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>二回のfor文で、
事前に用意した配列の画像の順にアクセスし、if ( OBJECT[y][x] )でアクセスした数字が1の場合はxとyの値を使って任意の箇所に四角を描写するという処理を行います。開始場所をx * SIDEとy * SIDEで指定することで、
配列の数字に対応して図形を描写することが出来ます。
var OBJECT = [
[1, 1, 1, 0],
[0, 0, 1, 0]
];このような配列にすると
1の並び方に従って、上の画像のような描写になります。
(灰色のグリッドは表示されません)
0 件のコメント:
コメントを投稿