自动刷新后如何避免闪烁

时间:2016-08-01 09:07:05

标签: javascript canvas

请您告诉我如何在自动刷新后停止在画布上绘制的图像上闪烁。 这是我的代码

 <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);
}

在上面的代码中,我在自动刷新后会闪烁。请帮助我。

谢谢和问候, Mujahid Ateeb Khan

1 个答案:

答案 0 :(得分:0)

您必须将clearRect电话投入成功回调。您看到的闪烁是在重绘之前清除上下文方式引起的。通过将其置于成功回调中,它将在相同的微任务中发生,因此不会出现闪烁。