HTML5 Canvas stroke가 앤티 앨리어싱이 적용되지 않았습니다.

Question

캔버스에서 두꺼운 앤티 앨리어스 획을 사용하여 원을 만들려고합니다.

원은 예상대로 그려 지지만 획의 가장자리는 매우 들쭉날쭉합니다. 내가 크롬 그렇게하지 어떻게해야 할 앤티 앨리어싱, ...

바이올린 강제 것을 읽는 계속 : http://jsfiddle.net/nipponese/hWsxw/

HTML

<div id="main"> 
    <canvas id="myCanvas" width="400" height="400" style="border: 1px solid #000"></canvas> 
     <div id="counter" style="height: 100px; width: 100px; border: 1px solid #000"> 
    </div> 
</div> 

JS을 + jQuery를

<script> 
    function calc(myVal) { 
     var canvas = document.getElementById("myCanvas"); 
     var ctx = canvas.getContext("2d"); 
     var radius = 70; 

     ctx.beginPath(); 
     ctx.arc(140, 140, 20, myVal * Math.PI, 0, true); 
     ctx.lineWidth = 14; 
     ctx.stroke(); 
    }; 
    $(document).ready(function() { 
     var count = 0; 
     var parsedCount; 
     function go(){ 
      if (count <= 200) { 
       parsedCount = count*.01 
       $('#counter').html('<p>' + parsedCount + '</p>'); 
       calc(parsedCount); 
       count++; 
      } 
     } 
     setInterval(go, 10) 
    }); 
</script> 

Answer 1

동료가 방금 clearRect를 사용하여 해당 항목을 지울 필요가 있다고 지적했습니다. 캔버스를 그릴 때마다 스트로크는 서로의 위에 그려져있었습니다.

function calc(myVal) { 
    var canvas = document.getElementById("myCanvas"); 
    var ctx = canvas.getContext("2d"); 
    var radius = 70; 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 

    ctx.beginPath(); 
    ctx.arc(140, 140, 20, myVal * Math.PI, 0, true); 
    ctx.lineWidth = 14; 
    ctx.stroke(); 
};