【问题标题】：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" width="800" height="600"></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) { }

标签： javascript html colors conditional execution

【解决方案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();
}

【讨论】：