在html5 / javascript中创建用户输入

Question

I have been able to generate several arcs using html/javascript/canvas. 我已经能够使用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). 我现在想做的是有一个用户界面，它将定义这些弧线，而不是手动逐行编码它们，每个弧线中唯一的变量是rad，sAng，eAng和扇区大小（我的笔划宽度）。

My aim is to draw anything from 2 to 30 arcs number to be defined by the user. 我的目的是绘制2到30个弧形数字，以供用户定义。

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);

Answer 1

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. 要从用户那里获取输入，您可以使用HTML输入元素，或者，如果不想使用HTML，则可以使用JavaScript提示功能，后者在实际应用程序中很少使用。

Here's an example of HTML input tags: 这是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>

The JavaScript prompt function can be used as such: JavaScript提示功能可以这样使用：

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

在html5 / javascript中创建用户输入

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-03-20 10:56:21

在html5 / javascript中创建用户输入

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-03-20 10:56:21

解决方案1
0 已采纳 2017-03-20 10:56:21