<!DOCTYPE html> 

<html lang="ja">

<head>

<meta charset="UTF-8"><//言語指定>

<link rel="stylesheet" href="base2.css" type="text/css">

<title>平衡距離と円弧</title>

</head>


<canvas id="canvas" style="border:3px solid red ; background-color : lavender;" width="400px" height="400px">

 
</canvas>


<script type="text/javascript" >


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

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

 //canvas位置

  canvas.style.position = "absolute";

    canvas.style.left = "300px";

    canvas.style.top = "40px";

    ctx1; 


var kyori = prompt("平衡距離を入力してください", "入力")

var kaku = prompt("角数を入力してください", "偶数入力")

var kisu=kaku%2;

var pi=Math.PI;


if( kisu>0){

document.write("奇数角形="+kaku+"<br>","奇数角形平行線幅はなし"+"<br>"); 


} 

kyori =kyori/2;//底辺

var dosu =360/kaku;

var rad=dosu/2;　//計算用角度

var rad=rad*pi/180;  //　角度をラジアンに変換

var hankei=kyori/Math.cos(rad);//半径

var hankei=Math.round(hankei*1000)/1000;


document.write ("<br>"+"直径="+ hankei*2+"  " + "半径= "+ hankei+ "<br>" + kaku+"角形の寸法です"+ "  " +"角度"+dosu+ "<br>");


var kaisi=prompt("開始角度を入力してください", "数値記入");

document.write ("開始角度"+kaisi+"<br>");

kaisi=kaisi*pi/180;    //開始頂点角度をラジアンに変換

document.write ("開始ラジアン"+kaisi+"<br>");


document.write ("頂点座標値"+"<br>");


//配列

 var xar1 = new Array(kaku); 

 var yar1 = new Array(kaku); 

var x=0

var y=0


for(i=0;i<kaku;i++) //　繰り返し条件

{

rad=i*dosu*pi/180;

rad=rad+kaisi; 

  x=Math.cos(rad)*hankei;      //　底辺の計算

  y=Math.sin(rad)*hankei;       //　垂線の計算


x=Math.round(x*1000)/1000;

y=Math.round(y*1000)/1000;

xar1[i]=x;//配列DATA代入

yar1[i]=y;

document.write(i+"  X "+x+" Y "+y+"<br>");

}

//　break　繰り返し処理から抜け出します

document.write(" "+"<br>");


//canvas内に文字表示

  ctx1.clearRect(0,0,canvas.width,canvas.height);//画面クリア＊

//canvas の中心

var xs=200;

var ys=200;


 // ctx1.font = "10pt Arial";

//  ctx1.fillText("平行線幅="+kyori*2, 10, 30); 

//  ctx1.fillText("半径＝"+hankei, 10, 50); 

//  ctx1.fillText("正"+kaku+"角形", 10, 70); 


/* canvasに文字描く */

function draw1() {

  canvas;

  if ( ! canvas || ! canvas.getContext ) { return false; }

//return false　clickイベントを設定する際に必要な記述

//clickイベントを実行した後にリンク先に移動するのを防ぐ

var j=20;

 ctx1.fillStyle = 'rgba(192, 80, 77, 1)'; // 赤

for(i=0;i<kaku;i++) //　繰り返し条件

{

j=20*i;

  ctx1.fillText("X"+xar1[i]+"Y"+yar1[i], 10, 90+j); 

}

}


/* 円を描く */

function draw2() {

  canvas;

  if ( ! canvas || ! canvas.getContext ) { return false; }


  ctx1.beginPath();

  ctx1.fillStyle = 'rgba(192, 80, 77, 1)'; // 赤

  ctx1.arc(xs, ys, hankei, 0, Math.PI*2, false);

  ctx1.stroke();

}


/* ポリゴンを描く */

function draw3() {


  canvas;//canvas呼び出し変数

  if ( ! canvas || ! canvas.getContext ) { return false; }

    ctx1.beginPath();

//　　ctx1.moveTo(xar1[0],yar1[0]);//開始位置


    ctx1.fillStyle = "red"

for(i=0;i<kaku;i++) //　繰り返し条件

{

    ctx1.lineTo(xs+xar1[i],ys-yar1[i]);

    
}

    ctx1.lineTo(xs+xar1[0],ys-yar1[0]);

    ctx1.stroke();

}


onload = function() {

//  draw1();

  draw2();

  draw3();

}

</script>

 <body class="body2">

 </body>


</html>