html5/javascriptでユーザー入力を作成

html/javascript/canvasを使用して複数の円弧を生成することができました。以下のコード行は、最終結果画像として円弧を描きます。html5/javascriptでユーザー入力を作成

私が今やってみたいのは、手動で行をコーディングするのではなく、これらの弧を手動で定義するユーザーインターフェイスです。各弧の唯一の変数はrad、sAng、eAngおよびSector size（my stroke width）。

私の目的は、ユーザーが定義する2〜30の円弧番号を描画することです。あなたはHTML、JavaScript prompt functionを使用しない場合arcs final result

// centre is x y rad sAng eAng antiC line fill Sector size 
//arc1 
drawArc(447, 426, 005, 00, 360, false, "blue", "white", 11); 
//arc2 
drawArc(447, 426, 210, 9, 41, false, "blue", "white", 58); 
//arc3 
drawArc(447, 426, 280, 9, 90, false, "blue", "white", 78); 
//arc4 
drawArc(447, 426, 210, 95, 130, false, "blue", "white", 222); 
//arc5 
drawArc(447, 426, 200, 140, 189, false, "blue", "white", 242); 
//arc6 
drawArc(447, 426, 280, 190, 235, false, "blue", "white", 82); 
//arc7 
drawArc(447, 426, 380, 00, 180, false, "blue", "white", 42);

出典

2017-03-20 Parky

こんにちは！ StackOverflowへようこそ！あなたはHTML入力要素を試しましたか？あなたはその価値を読んで適切に行動することができます。 – Alpha

ねえ！ようこそstackoverflowへ！何があなたの問題であり、何を手伝ってくれるのですか？ –

こんにちは、すばらしい返答をいただきありがとうございます。ユーザーが描画されるアークの量を定義できるかどうか、ユーザーが制御できる情報を追加するために使用できるツールやコードを円弧、数値、セクターサイズの列の数字 – Parky

ユーザからの入力を取得するには、あなたと、HTML input elementsを使用したりすることができ、次のいずれか

私の最終目標は、次のようなイメージです後者は実際のアプリケーションで使用されることはめったにありません。

は、ここでHTML入力タグの例です：

<html> 
    <body> 
    Name: <input type="text" id="user_name"> 
    <br> 
    Age: <input type="number" id="user_age" min="0"> 
    <br> 
    <button id="button">Submit</button> 
    <script> 
     document.getElementById('button').addEventListener('click', e=>{ 
     var name = document.getElementById('user_name').value, 
      age = parseInt(document.getElementById('user_age').value); 
     alert(`Hello, ${name}! In ten years you will be ${age + 10} years old.`); 
     }); 
    </script> 
    </body> 
</html>

のJavaScriptプロンプト機能はそのまま使用することができます。

var name = prompt("What's your name?"), 
    age = prompt('How old are you?');

出典

2017-03-20 10:56:21

ボタンの押下時にユーザー名と年齢を表示する方法を見ることができます。別のユーザー名と年齢を追加するための別のフォームを表示できるようになりましたかすでに入力されている行の下の行に – Parky

間違いなく。以前の弧を削除せずにボタンをクリックするたびに弧を描くことで、同じフォームを再度使用することもできます。このようにして、ユーザーは入力要素の値を変更し、ボタンをクリックして繰り返すことで、追加したいアークの数を追加できます。もう1つの可能性は、新しい入力フィールドを作成するためにdocument.createElement（）関数を使用するか、ボタンが押されたときに最初の入力要素の複製を作成するNode.cloneNode（）関数を使用することです。 –

多くのありがとう私はこれを試してみると、あなたがすべて私はどのように取得知っている。 – Parky

html5/javascriptでユーザー入力を作成

答えて

関連する問題