Javascript Canvas 1つの項目がちらつきます

私はキャンバスでオブジェクトに向かって動くようにしようとしていますが、それらが会って重なり合うと消えてしまい、もう一方が落ちるはずです。今私はそれを行うアニメーションを持っていますが、項目の1つがちらついています。Javascript Canvas 1つの項目がちらつきます

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
canvas{border:#666 3px solid;} 
 
</style> 
 

 
</head> 
 
<body onload="draw(530,15); draw1(1,15);"> 
 
<canvas id="canvas" width="600" height="400"></canvas> 
 
<script> 
 
function draw(x,y){ 
 
    var canvas = document.getElementById('canvas'); 
 
    var ctx = canvas.getContext('2d'); 
 
    ctx.save(); 
 
    ctx.clearRect(x, y, 600, 400); 
 
    ctx.fillStyle = "rgba(0,200,0,1)"; 
 
    ctx.fillRect (x, y, 70, 50); 
 
    ctx.restore(); 
 
    x -= 0.5; 
 
\t if(x==300) 
 
\t { 
 
    return; 
 
\t }; 
 
    var loopTimer = setTimeout('draw('+x+','+y+')',5); 
 
\t }; 
 
\t 
 
\t function draw1(w,e){ 
 
    var canvas = document.getElementById('canvas'); 
 
    var ctx = canvas.getContext('2d'); 
 
    ctx.save(); 
 
    ctx.clearRect(w-1,e-2,600,400); 
 
    ctx.fillStyle = "rgba(0,200,0,1)"; 
 
    ctx.fillRect (w, e, 70, 50); 
 
    ctx.restore(); 
 
    w += 1; 
 
\t if(w==265) 
 
\t { 
 
\t w -= 1; 
 
\t e +=2; 
 
\t }; 
 
    var loopTimer = setTimeout('draw1('+w+','+e+')',10); 
 
}; 
 
</script> 
 
</body> 
 
</html>

は2日間しようとしてますが、適切にそれを修正するように見えることはできません。前もって感謝します。両方の描画機能でctx.clearReactの

出典

2016-09-07 J V

あなたは、フレームを提示するブラウザを強制的に毎秒あまりにも多くのフレームをレンダリングしています。描画関数が返るたびに、ブラウザはページにフレームを表示すると想定します。

アニメーションは、ほとんどのデバイスで60FPSのディスプレイリフレッシュレートに同期する必要があります。これを行うには、すべてのアニメーションを処理するレンダーループが1つあります。（RAF）を使用してこの関数を呼び出すと、アニメーションがディスプレイのハードウェアとブラウザのレンダリングと同期した状態に保たれます。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
canvas{border:#666 3px solid;} 
 
</style> 
 

 
</head> 
 
<!-- dont need this <body onload="draw(530,15); draw1(1,15);">--> 
 
<body> 
 
<canvas id="canvas" width="600" height="400"></canvas> 
 
<script> 
 
var canvas,ctx,x,y,w,e; 
 
var canvas,ctx,x,y,w,e; 
 
function draw() { 
 
    ctx.fillStyle = "rgba(0,200,0,1)"; 
 
    ctx.fillRect(x, y, 70, 50); 
 
}; 
 

 
function draw1(w, e) { 
 
    ctx.fillStyle = "rgba(0,200,0,1)"; 
 
    ctx.fillRect(w, e, 70, 50); 
 
}; 
 

 
function update(time){ // high precision time passed by RAF when it calls this function 
 
    ctx.clearRect(0,0,canvas.width,canvas.height); // clear all of the canvas 
 
    if(w + 70 >= x){ 
 
     e += 2;   
 
    }else{ 
 
     x -= 0.75; 
 
     w += 1; 
 
    }; 
 
    draw(x,y); 
 
    draw1(w,e); 
 

 
    requestAnimationFrame(update) 
 
    // at this point the function exits and the browser presents 
 
    // the canvas bitmap for display 
 
} 
 

 
function start(){ // set up 
 
    x = 530; 
 
    y = 15; 
 
    w = 1; 
 
    e = 15; 
 
    canvas = document.getElementById('canvas'); 
 
    ctx = canvas.getContext('2d'); 
 
    requestAnimationFrame(update) 
 
} 
 
window.addEventListener("load",start); 
 
</script> 
 
</body> 
 
</html>

出典

2016-09-07 11:45:46 Blindman67

鮮やかな答え！ – Jamiec

これは完全に動作し、私の使用のためにちょっとチューニングしました。どうもありがとう！ –

-1

第2のパラメータは0でなければならない：

ctx.clearRect（0、0、600、400）。

これは、すべてのキャンバスを消去することを意味します。

出典

2016-09-07 11:23:10 Khoa

おめでとう - あなただけの両方の項目がちらつくました！ – Jamiec

@jamiec、投票の前に再確認する必要があります。コードを実行して問題を確認します。鉱山に変更して解決策 – Khoa

を見ました。私はOPのスニペットを新しい答えにコピーし、最初の2つのパラメータのすべての 'clearRect'を0,0に変更して実行しました。チェックしましたか？ – Jamiec

アニメーションの方法は古くなっています（つまり、setTimeoutの使用）。代わりにrequestAnimationFrameを使用する必要があります。これにより、スムーズでちらつきのないアニメーションが得られます。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
canvas{border:#666 3px solid;} 
 
</style> 
 

 
</head> 
 
<body onload="requestAnimationFrame(animate);"> 
 
<canvas id="canvas" width="600" height="400"></canvas> 
 
<script> 
 
var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 
    
 
var x = 530, y = 15; 
 
function animate(){ 
 
    requestID = requestAnimationFrame(animate); 
 
    ctx.clearRect(x, y, 600, 400); 
 
    ctx.fillStyle = "rgba(0,200,0,1)"; 
 
    ctx.fillRect (x, y, 70, 50); 
 
    x -= 0.5; 
 
    if(x==300) 
 
    { 
 
    cancelAnimationFrame(requestID) 
 
    }; 
 
} 
 
</script> 
 
</body> 
 
</html>

出典

2016-09-07 11:43:18 Jamiec

Javascript Canvas 1つの項目がちらつきます

答えて

関連する問題