creating user input in html5/javascript
Question
I have been able to generate several arcs using html/javascript/canvas. The lines of code below as you will see draw the arcs as my final result image.
What I would now like to do is have a user interface that will define these arcs instead of coding them line by line manually, the only variables in each arc is rad, sAng, eAng and Sector size (my stroke width).
My aim is to draw anything from 2 to 30 arcs number to be defined by the user.
My end goal is an image similar to this: 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);
1 answers
solution1
0 ACCPTED 2017-03-20 10:56:21
To get input from the user, you can either use HTML input elements or, if you don't want to use HTML, the JavaScript prompt function , with the latter seldom being used in real applications.
Here's an example of HTML input tags:
<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>
The JavaScript prompt function can be used as such:
var name = prompt("What's your name?"),
age = prompt('How old are you?');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.