<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>square</title>
<script>
var canvas;
var ctx;
//四角の一辺の長さを変数に入れておく
var SIDE = 20;
window.onload = function(){
canvas = document.querySelector("#canvas");
ctx = canvas.getContext("2d");
draw();
};
//四角を描く
function draw(){
ctx.strokeStyle = "blue";
ctx.strokeRect(0, 0, SIDE, SIDE);
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>strokeRectで四角を描写できます。strokeRectの引数には左から(X軸の開始点, Y軸の開始点, 幅, 高さ)を指定して四角を描写します。実行すると
この様に四角が表示されます。この四角を右にたくさん並べて表示してみます。
function draw(){
ctx.strokeStyle = "blue";
for ( var i = 0; i < 5; i++) {
ctx.strokeRect(i * SIDE, 0, SIDE, SIDE);
}
}draw関数のstrokeRect関数の前にfor分で繰り返し実行をします。for ( var i = 0; i < 5; i++ )を書くと、0から1ずつ足して、内部のコードをiが5未満の数字になるまで実行するという意味になり、iの値は0, 1, 2, 3, 4でstrokeRectを行う。第一引数の開始点を20ずつずらすということで、i * SIDEで四角を並べるように描写することができます。このコードを実行すると
このようにforで指定した分だけ四角が表示されました。for ( var i = 0; i < 10; i++ )にすると、
四角が10個表示されました。
0 件のコメント:
コメントを投稿