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

Question

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

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

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

Answer 1

看看this Jsfiddle。您需要将字段定义为输入类型="number"。然后读取输入，计算它们并根据结果将不同的颜色字符串传递给您的动画函数，该函数现在采用参数颜色。您还需要真正学习如何正确使用函数和属性名称。您使用的是 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();
}

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

How do I properly use conditional execution to draw a circle based on input?

javascript

html

colors

conditional

execution

颜色