HTML5 Canvas đột quỵ không chống răng cưa

Question

Tôi chỉ đang cố gắng tạo một vòng tròn với dấu đột quỵ chống răng cưa dày trong canvas.

Vòng tròn được vẽ như mong đợi, nhưng các cạnh của đột quỵ rất lởm chởm. Tôi cứ đọc mà Chrome buộc anti-aliasing, vì vậy không biết phải làm gì ...

Fiddle: 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> 

Các 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

Đồng nghiệp của tôi vừa chỉ ra rằng tôi cần sử dụng clearRect để xóa canvas sau mỗi lần vẽ. Các nét chỉ được vẽ trên đầu trang của nhau.

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