Javascript 如何正确使用条件执行根据输入绘制圆？

我的最终目标是创建一个函数，在这个函数中，最后你必须找到一个按钮，当你按下按钮时，它将两个数字相加，如果这个数字小于5，它将绘制一个红色圆圈，如果它更大，它将绘制一个黄色圆圈。我遇到的问题是，我不知道如何将我的两个输入定义为X。我希望这样，当X<5时，它会画一个红色圆圈

 Number: <input id="numberOne" /> <br/>                                         

Number: <input id="numberTwo" /> <br/>                                         


<input type="button" value="Your Color!" onclick="decideColor()" />            

<canvas id="myCanvas" width="800" height="600"></canvas>                       

<script src="js/main.js"></script>                                             
</body>                                                                        
</html>     

这是我到目前为止取得的成绩

 Number: <input id="numberOne" /> <br/>                                         

Number: <input id="numberTwo" /> <br/>                                         


<input type="button" value="Your Color!" onclick="decideColor()" />            

<canvas id="myCanvas" width="800" height="600"></canvas>                       

<script src="js/main.js"></script>                                             
</body>                                                                        
</html>     

HTML:



条件性实践


颜色

 Number: <input id="numberOne" /> <br/>                                         

Number: <input id="numberTwo" /> <br/>                                         


<input type="button" value="Your Color!" onclick="decideColor()" />            

<canvas id="myCanvas" width="800" height="600"></canvas>                       

<script src="js/main.js"></script>                                             
</body>                                                                        
</html>     

编号：

编号：

和Java： var canvas=document.getElementById（“myCanvas”）； var ctx=canvas.getContext（“2d”）

 Number: <input id="numberOne" /> <br/>                                         

Number: <input id="numberTwo" /> <br/>                                         


<input type="button" value="Your Color!" onclick="decideColor()" />            

<canvas id="myCanvas" width="800" height="600"></canvas>                       

<script src="js/main.js"></script>                                             
</body>                                                                        
</html>     

函数分色（）{
var numberOne=document.getElementbyId（“numberOne”）；
var numberTwo=document.getElementbyId（“numbertw”）；
}
//#F04331红色#006400绿色#FAE157黄色
函数animate（）{
ctx.clearRect（0,0，canvas.width，canvas.height）；
if（x<5）{
ctx.fillstyle=“#F04331”
圆角圆（10,10,30）
}
函数圆角圆（x、y、半径）{
ctx.beginPath（）；
ctx.弧（x，y，半径，0，数学PI*2）；
ctx.closePath（）；
ctx.fill（）；}
}

看一看。您需要将字段定义为输入类型=“编号”。然后读取输入，计算它们，并根据结果将不同的颜色字符串传递给动画函数，该函数现在接受一个参数颜色。您还需要真正学习如何正确使用函数和属性名。您使用的是

fillstyle

，但它被称为

fillstyle

 Number: <input id="numberOne" /> <br/>                                         

Number: <input id="numberTwo" /> <br/>                                         


<input type="button" value="Your Color!" onclick="decideColor()" />            

<canvas id="myCanvas" width="800" height="600"></canvas>                       

<script src="js/main.js"></script>                                             
</body>                                                                        
</html>     

function animate(color){

   var canvas = document.getElementById("myCanvas"); 
   var ctx = canvas.getContext("2d");

   ctx.clearRect(0,0, canvas.width, canvas.height);

   ctx.fillstyle = color;

   ctx.beginPath();
   ctx.arc(10, 10, 30, 0, Math.PI * 2);
   ctx.closePath();
   ctx.fill();
}

---

要存储输入字段的值，请使用：var numberOne=document.getElementbyId（“numberOne”）.value；var numberTwo=document.getElementbyId（“numberTwo”）.value；在if中不要使用x，而是：if（numberOne>5 | | numberTwo>5）{