描画-三角形

三角形を書く
塗りつぶし

三角形を書く

三角形はmoveto()、linto()命令で3つの頂点間に線を書くことで描画できます。

<!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.moveTo(320, 120);
    ctx.lineTo(160, 360);
    ctx.lineTo(480, 360);
    ctx.lineTo(320, 120);
    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.moveTo(320, 120);

ctx.lineTo(160, 360);

ctx.lineTo(480, 360);

ctx.lineTo(320, 120);

ctx.strokeStyle = "pink" ;

ctx.lineWidth = 1 ;

ctx.stroke();

ctx.closePath();

</script>

</body>

</html>

25行目～28行目で3つの頂点間に線を引いています。

    ctx.moveTo(320, 120);
    ctx.lineTo(160, 360);
    ctx.lineTo(480, 360);
    ctx.lineTo(320, 120);

ctx.moveTo(320, 120);

ctx.lineTo(160, 360);

ctx.lineTo(480, 360);

ctx.lineTo(320, 120);

三角形以外の多角形もこの方法で描画を行います(四角形に関しては別途紹介します)

塗りつぶし

描画した三角形を塗りつぶすことができます。

<script>
 
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
 
    ctx.beginPath();
    ctx.moveTo(320, 120);
    ctx.lineTo(160, 360);
    ctx.lineTo(480, 360);

    ctx.fillStyle = "red" ;
    ctx.lineWidth = 1 ;
    ctx.fill();
    ctx.closePath();
 
</script>

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

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

ctx.beginPath();

ctx.moveTo(320, 120);

ctx.lineTo(160, 360);

ctx.lineTo(480, 360);

ctx.fillStyle = "red" ;

ctx.lineWidth = 1 ;

ctx.fill();

ctx.closePath();

</script>

「strokeStyle」命令の代わりに29行目で「fillStyle」を使用しています。これは塗りつぶす色を指定します。

    ctx.fillStyle = "red" ;

29	ctx.fillStyle = "red" ;

「stroke()」命令の代わりに31行目で「fill()」を使用しています。これは塗りつぶしを実行する命令です。

    ctx.fill();

31	ctx.fill();

塗りつぶしは全ての頂点間を線で引く必要がなく、最後の線を省略できます。そのため三角形描画ではあった28行目が省かれています。

   ctx.lineTo(320, 120);

28	ctx.lineTo(320, 120);

多角形が描画できました。しかし四角形は特別な扱いをしますので、次回は四角形を書きます。