自動リフレッシュ後にちらつきを避ける方法

Question

自動リフレッシュ後にキャンバスに描かれた画像のちらつきを止める方法を教えてください。 これは私がオートリフレッシュ後にちらつき取得しています上記のコードで私のコード

<script> 
    setTimeout(data1, 0); 
    function data1(){ 
for(var i=0;i<data.length;i++) 
{ 
    var canvas=document.getElementById('map'+id); 
    context=canvas.getContext("2d"); 
    context.clearRect(0,0,canvas.width,canvas.height); 
    console.log(JSON.stringify(response[0][3])+"Helllooooo"); 
    $.ajax({ 
    url : "/getData?id="+data[i][3], 
    type : "GET", 
    data : null, 
    datatype : "JSON", 
    success : function(response, textStatus, jqXHR) 
    { 
     for(var j=0;j<response[0].length;j++) 
     { 
      console.log(JSON.stringify(response[0][j]+"Hello")); 
     } 
     console.log(i+" "+response) 
     if(response[0][7]=="1") 
     { 
      console.log("Status 1"); 
      context.drawImage(image_red, response[0][1], response[0][2]); 
     } 
     if(response[0][7]=="2") 
     { 
      console.log("Status 2"); 
      context.drawImage(image_green,response[0][1],response[0][2]); 
     } 
    } 
}); 
} 
} 
setInterval(data1,5000); 
} 

です。親切に私を助けてください。

おかげで、よろしく、 ムジャヒディンAteebカーン

Answer 1

あなたは成功コールバックinsude clearRectコールを置く必要があります。表示されるちらつきは、再描画する前にコンテキストをクリアすることによって発生します。成功コールバックに入れることで同じマイクロタスクで発生するため、フリッカーは表示されません。