在循環結束後在畫布中更改圖形的顏色

我正在處理作業，並且找不到解決方案。這是一個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，因爲它似乎不是問題。任何想法，我怎樣才能使它從黃色切換到藍色，每次它完成從左到右的運行？

謝謝！

來源

2017-08-16 Franco Gargiulo

becasue'fillStyle'只存儲RGB顏色，而不是代表字符串，所以你的顏色永遠不會相等，你可以在設置lienzo3.fillStyle =「藍色」時呼叫'cambiacolor'功能 – Anami

非常感謝！當我登錄lienzo3.fillStyle並且返回＃ffff00但是無法繼續時，我對此有所懷疑。改變一切從那些誤導性的顏色名稱到十六進制固定它。我以爲我已經學會了'數據類型'的教訓......我的不好。 –

再次感謝，這是我的第一個問題，你對我真的很友善。你幫了很多！ –

由於阿南指出，你必須改變你的cambiacolor方法如下

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

來源

2017-08-16 02:15:29 trgiangvp3

謝謝！這裏是一個什麼樣的社區。我很高興見到你。 –

在循環結束後在畫布中更改圖形的顏色

回答

相關問題