2017-08-16 2 views
0

私は取得した課題に取り組んでおり、解決策を見つけることができません。 左から右に向かうボールの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は含めません。 左から右への実行が完了するたびに黄色から青に切り替える方法について考えてみましょうか?

ありがとうございます! Anamiが指摘したように

+1

次のようにあなたのcambiacolor方法を変更する必要がありますあなたは 'cambiacolor'関数を呼び出す間lienzo3.fillStyle =" blue "を設定することができます – Anami

+0

ありがとうございました!私はlienzo3.fillStyleをログに記録したときに#ffff00を返したが、それ以上は行くことができなかったという疑いがあった。それらを誤った色の名前から16進数に変更しました。私はすでに「データ型」のレッスンを学んだと思っていた。 –

+0

もう一度おねがいします。私の最初の質問でした。あなたは本当に親切でした。あなたはたくさんの助けになりました! –

答えて

0

、あなたはとてもあなたの色は決して、

function cambiacolor() { 
 
    if (lienzo3.fillStyle == "#ffff00") { 
 
    lienzo3.fillStyle = "blue"; 
 
    } else if (lienzo3.fillStyle == "#0000ff") { 
 
    lienzo3.fillStyle = "yellow"; 
 
    } 
 
}
fillStyle`が唯一の店舗RGBの色ではなく、文字列を表す `becasue

+0

ありがとう!どのような親切なコミュニティがここにありますか。私はあなたに到達して本当にうれしいです。 –

関連する問題