画数と色指定で正多角形を描画してみます。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>多角形の描画</title>
<meta charset="UTF-8">
<style>
body {
background-color: #f5f5f5
}
</style>
</head>
<body>
<center>
<label for="sides">辺の指定:</label>
<input type="number" id="sides" value="4" min="3" max="20">
<!-- 初期値は四角形を描画。最小は三角形、最大は二十角形 -->
<label for="color"> 色の指定:</label>
<input type="color" id="color" value="#32cd32">
<!-- 多角形の色の初期値は（limegreen #32cd32） -->
<br><br>
<canvas id="myCanvas" width="300" height="300"
style="border:2px solid darkgray; background-color:#fffacd;">
</canvas>
<!--
の背景色は（darkgray #a9a9a9）
キャンバスサイズは300pixel四方
キャンバスの背景色は（lemonchiffon #fffacd）
-->
</center>
<script>
function drawPolygon() { /* 多角形を描画 */
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
/* 多角形を表示するエリア（casnvas）を描画 */
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const sides = parseInt(document.
getElementById("sides").value);
const color = document.getElementById("color").value;
const radius = 120;
/*
多角形は表示するエリアの中心から描画
多角形の半径は120pixel
*/
ctx.beginPath();
/*
beginPath()で現在のパスをリセット
*/
for (let i = 0; i < sides; i++) {
const angle = (i * 2 * Math.PI) / sides;
const x = centerX + radius * Math.cos(angle);
const y = centerY + radius * Math.sin(angle);
/*
三角関数により（※）・・・
cosθ=隣辺/斜辺＝c/a
sinθ=対辺/斜辺＝ｂ/a
tanθ=対辺/隣辺＝ｂ/c
により
隣辺= 斜辺×cosθ＝a×cosθ
対辺= 斜辺×sinθ＝a×sinθ
*/
if (i === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
}
/*
==は、文字列と数値の比較の場合、文字列を数値に変換
===は、文字列と数値の比較の場合、文字列は数値に変換されない
つまり、===の方が厳密に比較します
moveTo(x, y)でパスの開始座標を指定
lineTo(x, y)で座標を指定してラインを引く
*/
ctx.closePath();
ctx.fillStyle = color;
ctx.fill();
}
/*
パスを閉じて塗りつぶす
*/
// 数値入力と色指定の値が変更されたら多角形を再描画する
document.getElementById("sides").
addEventListener("change", drawPolygon);
document.getElementById("color").
addEventListener("change", drawPolygon);
// ページ読み込み時に初回の描画を行う
drawPolygon();
</script>
</body>
</html>
<!-- index.html --><input type="number">と<input type="color">
を使用して辺の数と多角形の色を入力
drawPolygon関数は、入力値に基づいて多角形を描画
数値と色指定が変更されたらdrawPolygon関数を呼び出す
※三角形と三角関数
上は表示直後の画面です。
［辺の指定］や［色の指定］を変更すれば・・・
直ぐにお反映されます。
