質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
canvas

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

HTML5

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

JavaScript

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

Q&A

解決済

1回答

2472閲覧

Canvasでレーダーチャートを作って動いたのですが挙動がおかしいです

shouninsen

総合スコア11

canvas

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

HTML5

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

JavaScript

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

0グッド

1クリップ

投稿2015/06/28 14:57

編集2015/06/28 15:04

記のようなプログラムを書きました。
実際に出力してみたところ、フォームもきちんと出来ていましたが、数値を入れて見るとレーダーチャートの枠は形を保ったままなのですが、データを繋いだ線があらぬ方向に行ってしまいます。
このあらぬ方向に線が飛ぶ問題をどう解決すれば良いでしょうか。

初心者なので、全く手立てを考えることができず質問に来た次第です。
また、プログラムも冗長な部分が多いです。温かい目で見てやってください。
こちらのサイトも初めて使うので至らぬ点も多いかと思いますがよろしくお願いします。

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

inputで取得した値を、parseIntで数値型にしてみたらどうでしょう?

lang

1function onButtonClick(){ 2 var target=document.getElementById("output"); 3 n1=parseInt(document.getElementById("n1").value); 4 : (略)

投稿2015/06/28 15:38

horohoro

総合スコア490

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shouninsen

2015/06/29 09:15

ご意見ありがとうございます。 実際に試してみましたところ動くようになりました!! ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問