記のようなプログラムを書きました。
実際に出力してみたところ、フォームもきちんと出来ていましたが、数値を入れて見るとレーダーチャートの枠は形を保ったままなのですが、データを繋いだ線があらぬ方向に行ってしまいます。
このあらぬ方向に線が飛ぶ問題をどう解決すれば良いでしょうか。
初心者なので、全く手立てを考えることができず質問に来た次第です。
また、プログラムも冗長な部分が多いです。温かい目で見てやってください。
こちらのサイトも初めて使うので至らぬ点も多いかと思いますがよろしくお願いします。
lang
1<!DOCTYPE html> 2 <html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Canvas</title> 6 <script type="text/javascript" src="draw.js"></script> 7 </head> 8 <body> 9 <h1>レーダーチャート</h1> 10 <!-- 入力フォーム --> 11 <form name="input" id="input" action=""> 12 <input type="text" name="n1" id="n1" value="0"> 13 <input type="text" name="n2" id="n2" value="0"> 14 <input type="text" name="n3" id="n3" value="0"> 15 <input type="text" name="n4" id="n4" value="0"> 16 <input type="text" name="n5" id="n5" value="0"> 17 <input type="text" name="n6" id="n6" value="0"> 18 <input type="text" name="n7" id="n7" value="0"> 19 <input type="text" name="n8" id="n8" value="0"> 20 <input type="button" value="演算開始!" onclick="onButtonClick();"> 21 </form> 22 <hr> 23 <div id="output"> 24 <canvas id="rader" width="600" height="600"></canvas> 25 </div> 26 </body> 27 </html> 28
lang
1window.onload = function(){ 2 canvas = document.getElementById("rader"); 3 ctx = canvas.getContext("2d"); 4 //*0.7071することで斜め45度にする 5 pr2=0.707; 6 var com=100*pr2; 7 8 //枠の八角形 9 ctx.beginPath() 10 ctx.moveTo(150,50); 11 ctx.lineTo(150+com,150-com); 12 ctx.lineTo(250,150); 13 ctx.lineTo(150+com,150+com); 14 ctx.lineTo(150,250); 15 ctx.lineTo(150-com,150+com); 16 ctx.lineTo(50,150); 17 ctx.lineTo(150-com,150-com); 18 ctx.lineTo(150,50); 19 ctx.stroke(); 20 21 //線 22 ctx.beginPath() 23 ctx.moveTo(150,150); 24 ctx.lineTo(150,50); 25 ctx.moveTo(150,150); 26 ctx.lineTo(150+com,150-com); 27 ctx.moveTo(150,150); 28 ctx.lineTo(250,150); 29 ctx.moveTo(150,150); 30 ctx.lineTo(150+com,150+com); 31 ctx.moveTo(150,150); 32 ctx.lineTo(150,250); 33 ctx.moveTo(150,150); 34 ctx.lineTo(150-com,150+com); 35 ctx.moveTo(150,150); 36 ctx.lineTo(50,150); 37 ctx.moveTo(150,150); 38 ctx.lineTo(150-com,150-com); 39 ctx.moveTo(150,150); 40 41 ctx.stroke(); 42 43 } 44function onButtonClick(){ 45 var target=document.getElementById("output"); 46 n1=document.getElementById("n1").value; 47 n2=document.getElementById("n2").value; 48 n3=document.getElementById("n3").value; 49 n4=document.getElementById("n4").value; 50 n5=document.getElementById("n5").value; 51 n6=document.getElementById("n6").value; 52 n7=document.getElementById("n7").value; 53 n8=document.getElementById("n8").value; 54 rader(); 55} 56 57function rader(){ 58 //八角形 59 ctx.beginPath() 60 ctx.moveTo(150,150-n1); 61 ctx.lineTo(150+n2*pr2,150-n2*pr2); 62 ctx.lineTo(150+n3,150); 63 ctx.lineTo(150+n4*pr2,150+n4*pr2); 64 ctx.lineTo(150,150+n5); 65 ctx.lineTo(150-n6*pr2,150+n6*pr2); 66 ctx.lineTo(150-n7,150); 67 ctx.lineTo(150-n8*pr2,150-n8*pr2); 68 ctx.lineTo(150,150-n1); 69 ctx.stroke(); 70} 71
↓実行結果
![イメージ説明]WIDTH:600下
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/06/29 09:15