Question

我正在完成一项任务，但我无法找到解决方案。这是一个从左到右的球的js画布图，一旦到达特定的x坐标，从左边开始，一遍又一遍。一旦它再次开始循环，我想让它从黄色变为蓝色。这是我的代码：

/* --- HTML --- */

<!DOCTYPE html>
<html>
<head>

<title>CANVAS</title>
    <script src="main.js"></script>
</head>
<body id="contenido">

<section id="tres">
    <p>3</p>
    <canvas id="lienzoTres" width="500" height="300"></canvas>
</section>

</body>
</html>

/* --- JS --- */

function animar() {
    var elemento=document.getElementById('lienzoTres');
    lienzo3=elemento.getContext('2d');
    x=70;
    y=130;
    radio=70;
    lienzo3.fillStyle="yellow";
    intervalo=setInterval(circuloAmarillo, 5);
    }
    window.addEventListener("load", animar, false);

function circuloAmarillo(){
    lienzo3.clearRect(x - radio, y - radio, radio * 2, radio * 2);
    x++;
    lienzo3.beginPath();
    lienzo3.arc(x,y,radio,0,Math.PI*2, false);
    lienzo3.fill();
    if(x>=430){
    lienzo3.clearRect(0, 0, 550, 300);
    x=70;
    cambiacolor();
    } 
}

function cambiacolor() {
    if (lienzo3.fillStyle=="yellow") {
    lienzo3.fillStyle="blue";
    } else if (lienzo3.fillStyle=="blue") {
    lienzo3.fillStyle="yellow";
    }
}

我不包括css，因为它似乎不是问题。关于如何在每次完成从左到右的运行时将其从黄色切换为蓝色的任何想法？

谢谢！

Answer 1

正如Anami指出的那样，您必须更改cambiacolor方法，如下所示

function cambiacolor() {
  if (lienzo3.fillStyle == "#ffff00") {
    lienzo3.fillStyle = "blue";
  } else if (lienzo3.fillStyle == "#0000ff") {
    lienzo3.fillStyle = "yellow";
  }
}

循环结束后更改画布中绘图的颜色

1 个答案: