質問編集履歴

2 画像追加

shouninsen

shouninsen score 11

2015/06/29 00:04  投稿
Canvasでレーダーチャートを作って動いたのですが挙動がおかしいです
下記のようなプログラムを書きました。
記のようなプログラムを書きました。
実際に出力してみたところ、フォームもきちんと出来ていましたが、数値を入れて見るとレーダーチャートの枠は形を保ったままなのですが、データを繋いだ線があらぬ方向に行ってしまいます。
このあらぬ方向に線が飛ぶ問題をどう解決すれば良いでしょうか。
初心者なので、全く手立てを考えることができず質問に来た次第です。
また、プログラムも冗長な部分が多いです。温かい目で見てやってください。
こちらのサイトも初めて使うので至らぬ点も多いかと思いますがよろしくお願いします。
```lang-＜HTML＞
<!DOCTYPE html>
 <html lang="ja">
   <head>
     <meta charset="utf-8">
     <title>Canvas</title>
     <script type="text/javascript" src="draw.js"></script>
   </head>
   <body>
     <h1>レーダーチャート</h1>
     <!-- 入力フォーム -->
     <form name="input" id="input" action="">
       <input type="text" name="n1" id="n1" value="0">
       <input type="text" name="n2" id="n2" value="0">
       <input type="text" name="n3" id="n3" value="0">
       <input type="text" name="n4" id="n4" value="0">
       <input type="text" name="n5" id="n5" value="0">
       <input type="text" name="n6" id="n6" value="0">
       <input type="text" name="n7" id="n7" value="0">
       <input type="text" name="n8" id="n8" value="0">
       <input type="button" value="演算開始!" onclick="onButtonClick();">
     </form>
     <hr>
     <div id="output">
       <canvas id="rader" width="600" height="600"></canvas>
     </div>
   </body>
 </html>
```
```lang-＜Javascript＞
window.onload = function(){
 canvas = document.getElementById("rader");
 ctx = canvas.getContext("2d");
 //*0.7071することで斜め45度にする
 pr2=0.707;
 var com=100*pr2;
 //枠の八角形
 ctx.beginPath()
 ctx.moveTo(150,50);
 ctx.lineTo(150+com,150-com);
 ctx.lineTo(250,150);
 ctx.lineTo(150+com,150+com);
 ctx.lineTo(150,250);
 ctx.lineTo(150-com,150+com);
 ctx.lineTo(50,150);
 ctx.lineTo(150-com,150-com);
 ctx.lineTo(150,50);
 ctx.stroke();
 //線
 ctx.beginPath()
 ctx.moveTo(150,150);
 ctx.lineTo(150,50);
 ctx.moveTo(150,150);
 ctx.lineTo(150+com,150-com);
 ctx.moveTo(150,150);
 ctx.lineTo(250,150);
 ctx.moveTo(150,150);
 ctx.lineTo(150+com,150+com);
 ctx.moveTo(150,150);
 ctx.lineTo(150,250);
 ctx.moveTo(150,150);
 ctx.lineTo(150-com,150+com);
 ctx.moveTo(150,150);
 ctx.lineTo(50,150);
 ctx.moveTo(150,150);
 ctx.lineTo(150-com,150-com);
 ctx.moveTo(150,150);
 ctx.stroke();
 }
function onButtonClick(){
   var target=document.getElementById("output");
   n1=document.getElementById("n1").value;
   n2=document.getElementById("n2").value;
   n3=document.getElementById("n3").value;
   n4=document.getElementById("n4").value;
   n5=document.getElementById("n5").value;
   n6=document.getElementById("n6").value;
   n7=document.getElementById("n7").value;
   n8=document.getElementById("n8").value;
   rader();
}
function rader(){
 //八角形
 ctx.beginPath()
 ctx.moveTo(150,150-n1);
 ctx.lineTo(150+n2*pr2,150-n2*pr2);
 ctx.lineTo(150+n3,150);
 ctx.lineTo(150+n4*pr2,150+n4*pr2);
 ctx.lineTo(150,150+n5);
 ctx.lineTo(150-n6*pr2,150+n6*pr2);
 ctx.lineTo(150-n7,150);
 ctx.lineTo(150-n8*pr2,150-n8*pr2);
 ctx.lineTo(150,150-n1);
 ctx.stroke();
}
```
```
↓実行結果
![イメージ説明][WIDTH:600](499bb7a8e6faa03178a7dbfd76413cb0.png)下
  • JavaScript

    27876 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • canvas

    438 questions

    HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

  • HTML5

    7462 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。
1 表現追記

shouninsen

shouninsen score 11

2015/06/29 00:00  投稿
Canvasでレーダーチャートを作って動いたのですが挙動がおかしいです
下記のようなプログラムを書きました。
実際に出力してみたところ、フォームもきちんと出来ていましたが、数値を入れて見るとレーダーチャートの枠は形を保ったままなのですが、データを繋いだ線があらぬ方向に行ってしまいます。
このあらぬ方向に線が飛ぶ問題をどう解決すれば良いでしょうか。
初心者なので、全く手立てを考えることができず質問に来た次第です。
また、プログラムも冗長な部分が多いです。温かい目で見てやってください。
こちらのサイトも初めて使うので至らぬ点も多いかと思いますがよろしくお願いします。
```lang-＜HTML＞
<!DOCTYPE html>
 <html lang="ja">
   <head>
     <meta charset="utf-8">
     <title>Canvas</title>
     <script type="text/javascript" src="draw.js"></script>
   </head>
   <body>
     <h1>レーダーチャート</h1>
     <!-- 入力フォーム -->
     <form name="input" id="input" action="">
       <input type="text" name="n1" id="n1" value="0">
       <input type="text" name="n2" id="n2" value="0">
       <input type="text" name="n3" id="n3" value="0">
       <input type="text" name="n4" id="n4" value="0">
       <input type="text" name="n5" id="n5" value="0">
       <input type="text" name="n6" id="n6" value="0">
       <input type="text" name="n7" id="n7" value="0">
       <input type="text" name="n8" id="n8" value="0">
       <input type="button" value="演算開始!" onclick="onButtonClick();">
     </form>
     <hr>
     <div id="output">
       <canvas id="rader" width="600" height="600"></canvas>
     </div>
   </body>
 </html>
```
```lang-＜Javascript＞
window.onload = function(){
 canvas = document.getElementById("rader");
 ctx = canvas.getContext("2d");
 //*0.7071することで斜め45度にする
 pr2=0.707;
 var com=100*pr2;
 //枠の八角形
 ctx.beginPath()
 ctx.moveTo(150,50);
 ctx.lineTo(150+com,150-com);
 ctx.lineTo(250,150);
 ctx.lineTo(150+com,150+com);
 ctx.lineTo(150,250);
 ctx.lineTo(150-com,150+com);
 ctx.lineTo(50,150);
 ctx.lineTo(150-com,150-com);
 ctx.lineTo(150,50);
 ctx.stroke();
 //線
 ctx.beginPath()
 ctx.moveTo(150,150);
 ctx.lineTo(150,50);
 ctx.moveTo(150,150);
 ctx.lineTo(150+com,150-com);
 ctx.moveTo(150,150);
 ctx.lineTo(250,150);
 ctx.moveTo(150,150);
 ctx.lineTo(150+com,150+com);
 ctx.moveTo(150,150);
 ctx.lineTo(150,250);
 ctx.moveTo(150,150);
 ctx.lineTo(150-com,150+com);
 ctx.moveTo(150,150);
 ctx.lineTo(50,150);
 ctx.moveTo(150,150);
 ctx.lineTo(150-com,150-com);
 ctx.moveTo(150,150);
 ctx.stroke();
 }
function onButtonClick(){
   var target=document.getElementById("output");
   n1=document.getElementById("n1").value;
   n2=document.getElementById("n2").value;
   n3=document.getElementById("n3").value;
   n4=document.getElementById("n4").value;
   n5=document.getElementById("n5").value;
   n6=document.getElementById("n6").value;
   n7=document.getElementById("n7").value;
   n8=document.getElementById("n8").value;
   rader();
}
function rader(){
 //八角形
 ctx.beginPath()
 ctx.moveTo(150,150-n1);
 ctx.lineTo(150+n2*pr2,150-n2*pr2);
 ctx.lineTo(150+n3,150);
 ctx.lineTo(150+n4*pr2,150+n4*pr2);
 ctx.lineTo(150,150+n5);
 ctx.lineTo(150-n6*pr2,150+n6*pr2);
 ctx.lineTo(150-n7,150);
 ctx.lineTo(150-n8*pr2,150-n8*pr2);
 ctx.lineTo(150,150-n1);
 ctx.stroke();
}
```
  • JavaScript

    27876 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • canvas

    438 questions

    HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

  • HTML5

    7462 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る