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

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

本文关键字：输入 绘制 执行 何正确 条件      更新时间：2023-09-26

我的最终目标是制作一个函数，最终你必须找到一个按钮，当你按下按钮时，它会将两个数字相加，如果这个数字小于5，它会画一个红色圆圈，如果它更大，它会绘制一个黄色圆圈。我遇到的问题是，我不知道如何将我的两个输入定义为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();}
}

看看这个Jsfidle。您需要将字段定义为inputtype="number"。然后读取输入，计算它们，并根据结果将不同的颜色字符串传递给animate函数，该函数现在采用参数颜色。您还需要真正学会正确使用函数和属性名称。您使用的是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();
}
相关文章：