2012-08-28 8 views
5

Ich versuche nur, einen Kreis mit einem dicken Anti-Aliased Strich in Leinwand zu machen.HTML5 Canvas Strich nicht anti-aliased

Der Kreis wird wie erwartet gezeichnet, aber die Kanten des Strichs sind sehr ungleichmäßig. Ich halte das Lesen, dass Chrome zwingt Anti-Aliasing, so dass nicht sicher, was zu tun ...

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> 

Die 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> 

Antwort

15

Mein Kollege wies gerade darauf hin, dass ich ClearRect verwenden muss, um das zu löschen Leinwand nach jeder Ziehung. Die Striche wurden einfach übereinander gezogen.

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