在html5 / javascript中創建用戶輸入
[英]creating user input in html5/javascript
問題描述
我已經能夠使用html / javascript / canvas生成多個弧。 您將看到的以下代碼行將圓弧繪制為我的最終結果圖像。
我現在想做的是有一個用戶界面，它將定義這些弧線，而不是手動逐行編碼它們，每個弧線中唯一的變量是rad，sAng，eAng和扇區大小（我的筆划寬度）。
我的目的是繪制2到30個弧形數字，以供用戶定義。
我的最終目標是一張與此類似的圖像： 最終結果
// 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);
1 個解決方案
解決方案1
0 已采納 2017-03-20 10:56:21
要從用戶那里獲取輸入，您可以使用HTML輸入元素，或者，如果不想使用HTML，則可以使用JavaScript提示功能 ，后者在實際應用程序中很少使用。
這是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?');
html5 canvas javascript等待用戶輸入
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.