사파리에서 다시 그릴 때 캔바스 셰이프에 앨리어스가 생깁니다.

Question

캔버스를 사용하여 간단한 진행 표시기를 그립니다. 요소가 처음으로 그려지는 경우에는 모두 멋지게 보이고 앤티 앨리어스가 나타나지만 두 번째로 그려지면 앤티 앨리어싱이 손실됩니다. 여기에서 무슨 일이 일어날 지 아무도 모른다.

function drawProgress(id, percent) { 
      var selected = $(safeID(id)).is('.selected'); 

      var canvas = $(safeID("CANVAS_" + id)); 
      var ctx = $(canvas)[0].getContext('2d'); 
      ctx.clearRect(); 

      if (selected) { 
       ctx.fillStyle = "#ffffff"; 
       ctx.strokeStyle = "#ffffff"; 
      } 
      else { 
       ctx.fillStyle = "#99a7ca"; 
       ctx.strokeStyle = "#99a7ca"; 
      } 

      ctx.beginPath(); 
      ctx.arc(canvas.width()/2.0, canvas.height()/2.0, canvas.width()/2.0-1, 0, Math.PI, false); 
      ctx.fill(); 

      ctx.beginPath(); 
      ctx.arc(canvas.width()/2.0, canvas.height()/2.0, canvas.width()/2.0-1, 0, Math.PI*2.0, false); 
      ctx.stroke(); 
     } 

Answer 1

clearRect의 크기를 지정해야합니다.