HTML5画布笔划不反锯齿

Question

我只是想在画布上制作一个粗糙的反锯齿笔画。

圆形按预期绘制，但笔画的边缘非常粗糙。我一直在读取Chrome会强制抗锯齿，所以不知道该怎么办...

小提琴：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(); 
};