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

Posted 2023-04-13

【中文标题】如何正确使用条件执行根据输入绘制圆？

【英文标题】：How do I properly use conditional execution to draw a circle based on input?

【发布时间】：2015-02-10 07:36:37

【问题描述】：

我的最终目标是创建一个函数，最终你必须找到一个按钮，当你按下按钮时，它将两个数字相加，如果该数字小于 5，它会画一个红色圆圈，如果它更大，它会画一个黄色的。我遇到的问题是我不知道如何将我的两个输入定义为 X。我想要它，以便当 X

这是我到目前为止的进度。

html: 条件练习

颜色

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

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


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

<canvas id="myCanvas"  ></canvas>                       

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

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

function decideColor() 

var numberOne= document.getElementbyId("numberOne");

var numberTwo= document.getElementbyId("numberTwo");



//#F04331 red #006400 green  #FAE157 yellow
function animate()
ctx.clearRect(0,0, canvas.width, canvas.height);

if( x < 5 ) 
ctx.fillstyle = "#F04331"
fillCircle(10, 10, 30)




function fillCircle(x, y, radius) 
ctx.beginPath();
ctx.arc(x, y, radius, 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)

【参考方案1】：

看看this Jsfiddle。您需要将字段定义为输入类型 =“数字”。然后读取输入，计算它们并根据结果，将不同的颜色字符串传递给您的动画函数，该函数现在采用参数颜色。您还需要真正学会正确地使用函数和属性名称。您使用的是fillstyle，但它被称为fillStyle。

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