描画-円 | PG talk

円を書く
塗りつぶし

円を書く

24行目から28行目のようにコードを記述しブラウザで表示してください。

<!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.arc(320, 60, 50, 0, Math.PI*2, false);
    ctx.strokeStyle = "pink";
    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.arc(320, 60, 50, 0, Math.PI*2, false);

ctx.strokeStyle = "pink";

ctx.stroke();

ctx.closePath();

</script>

</body>

</html>

円を書く命令が25行目の「arc()」です。

角度や方向がわかりづらいですね、まず角度の設定を確認していきます。

ラジアンは0度から360度を0～2πで表現します。どのように描画されるか次のコードで終了角度を変更しながら確認します。

    ctx.beginPath();
    ctx.strokeStyle = "pink";
    ctx.arc(320, 50, 20,0,Math.PI*0.5, false);
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.strokeStyle = "pink";
    ctx.arc(320, 100, 20,0,Math.PI*1, false);
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.strokeStyle = "pink";
    ctx.arc(320, 150, 20,0,Math.PI*1.5, false);
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.strokeStyle = "pink";
    ctx.arc(320, 200, 20,0,Math.PI*2, false);
    ctx.stroke();
    ctx.closePath();

ctx.beginPath();

ctx.strokeStyle = "pink";

ctx.arc(320, 50, 20,0,Math.PI*0.5, false);

ctx.stroke();

ctx.closePath();

ctx.beginPath();

ctx.strokeStyle = "pink";

ctx.arc(320, 100, 20,0,Math.PI*1, false);

ctx.stroke();

ctx.closePath();

ctx.beginPath();

ctx.strokeStyle = "pink";

ctx.arc(320, 150, 20,0,Math.PI*1.5, false);

ctx.stroke();

ctx.closePath();

ctx.beginPath();

ctx.strokeStyle = "pink";

ctx.arc(320, 200, 20,0,Math.PI*2, false);

ctx.stroke();

ctx.closePath();

次に方向を確認します。上記はfalse(時計回り)を指定していました。これをtrue(反時計回り)に変更します。

   ctx.beginPath();
    ctx.strokeStyle = "pink";
    ctx.arc(320, 50, 20,0,Math.PI*0.5, true);
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.strokeStyle = "pink";
    ctx.arc(320, 100, 20,0,Math.PI*1, true);
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.strokeStyle = "pink";
    ctx.arc(320, 150, 20,0,Math.PI*1.5, true);
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.strokeStyle = "pink";
    ctx.arc(320, 200, 20,0,Math.PI*2, true);
    ctx.stroke();
    ctx.closePath();

ctx.beginPath();

ctx.strokeStyle = "pink";

ctx.arc(320, 50, 20,0,Math.PI*0.5, true);

ctx.stroke();

ctx.closePath();

ctx.beginPath();

ctx.strokeStyle = "pink";

ctx.arc(320, 100, 20,0,Math.PI*1, true);

ctx.stroke();

ctx.closePath();

ctx.beginPath();

ctx.strokeStyle = "pink";

ctx.arc(320, 150, 20,0,Math.PI*1.5, true);

ctx.stroke();

ctx.closePath();

ctx.beginPath();

ctx.strokeStyle = "pink";

ctx.arc(320, 200, 20,0,Math.PI*2, true);

ctx.stroke();

ctx.closePath();

塗りつぶし

円の中を塗りつぶします。

    ctx.beginPath();
    ctx.arc(320, 60, 50, 0, Math.PI*2, false);
    ctx.fillStyle = "pink";
    ctx.fill();
    ctx.closePath();

ctx.beginPath();

ctx.arc(320, 60, 50, 0, Math.PI*2, false);

ctx.fillStyle = "pink";

ctx.fill();

ctx.closePath();

四角形と同様に塗りつぶす色を「fillStyle()」、塗りつぶしの実行を「fill()」で行います。

線、四角形、円を書くことができました。次に文字を描画していきます。