描画-四角形

四角形を書く
塗りつぶし
シンプルな記述方法

四角形を書く

四角形を書くための命令があります。プログラムを見ていきましょう。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>JavaScriptでゲーム</title>
    <style>
    	* { padding: 0; margin: 0; }
        canvas {background: #000000; 
            position: absolute;
        	top: 50%;
	        left: 50%;
	        transform: translate(-50%, -50%);}
    </style>
</head>
<body>

<canvas id="canvas" width="640" height="480"></canvas>

<script>
 
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
 
    ctx.beginPath();
    ctx.rect(20, 40, 50, 50);
    ctx.rect(20, 100, 400, 50);
    ctx.rect(400, 200, 20, 200);
    ctx.strokeStyle = "pink";
    ctx.lineWidth = 1;
    ctx.stroke();
    ctx.closePath();

</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>JavaScriptでゲーム</title>

<style>

* { padding: 0; margin: 0; }

canvas {background: #000000;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);}

</style>

</head>

<body>

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

ctx.beginPath();

ctx.rect(20, 40, 50, 50);

ctx.rect(20, 100, 400, 50);

ctx.rect(400, 200, 20, 200);

ctx.strokeStyle = "pink";

ctx.lineWidth = 1;

ctx.stroke();

ctx.closePath();

</script>

</body>

</html>

ブラウザで表示すると3つの四角形が書かれます。

四角形を書く命令が「rect」です。引数は次の様に左上座標と横、縦のサイズをピクセル値で指定します。

塗りつぶし

四角形内を塗りつぶします。次のように28行目、30行目を変更しブラウザで表示してください。

    ctx.beginPath();
    ctx.rect(20, 40, 50, 50);
    ctx.rect(20, 100, 400, 50);
    ctx.rect(400, 200, 20, 200);
    ctx.fillStyle  = "pink";
    ctx.lineWidth = 1;
    ctx.fill();
    ctx.closePath();

ctx.beginPath();

ctx.rect(20, 40, 50, 50);

ctx.rect(20, 100, 400, 50);

ctx.rect(400, 200, 20, 200);

ctx.fillStyle = "pink";

ctx.lineWidth = 1;

ctx.fill();

ctx.closePath();

「strokeStyle」命令の代わり記述した28行目の「fillStyle」は塗りつぶす色を指定します。

「stroke()」命令の代わり記述した30行目の「fill()」は塗りつぶしを実行する命令です。

シンプルな記述方法

もっと短いコードで四角形を書くことができます。「beginPath()」、「closePath()」を記述せず、「rect()」と「stroke()」命令を一つにした「strokeRect()」を利用します。

    ctx.strokeStyle = "pink";
    ctx.lineWidth = 1;
    ctx.strokeRect(20,20,50,50);

ctx.strokeStyle = "pink";

ctx.lineWidth = 1;

ctx.strokeRect(20,20,50,50);

塗りつぶしも同様に「fillRect()」命令があります。

    ctx.fillStyle = "pink";
    ctx.lineWidth = 1;
    ctx.fillRect(20,20,50,50);

ctx.fillStyle = "pink";

ctx.lineWidth = 1;

ctx.fillRect(20,20,50,50);

四角形の描画ができました。次に円を書いていきましょう。