jquery Leinwand Kreis

Question

machte ich einen Countdown mit einer Leinwand

Arbeitscode Zeichnung: http://jsfiddle.net/ajFsx/

window.onload = function() { 
    canvas = document.getElementById('timer'), 
    seconds = document.getElementById('counter'), 
    ctx  = canvas.getContext('2d'), 
    sec  = 180, 
    countdown = sec; 
    ctx.lineWidth = 8; 
    ctx.strokeStyle = "#528f20"; 
    var 
    startAngle = 0, 
    time  = 0, 
    intv  = setInterval(function(){ 
     var endAngle = (Math.PI * time * 2/sec); 
     ctx.arc(65, 35, 30, startAngle , endAngle, false); 
     startAngle = endAngle; 
     ctx.stroke(); 

     countdown--; 
     if (countdown > 60){ 
      seconds.innerHTML = Math.floor(countdown/60); 
      seconds.innerHTML += ":" + countdown%60; 
     } 
     else{ 
      seconds.innerHTML = countdown; 
     } 
     if (++time > sec,countdown == 0) { clearInterval(intv), $("#timer, #counter").remove(), $("#timers").prepend('<img id="theImg" src="#" />'); } 
    }, 10); 
}​ 

Meine Frage ist folgende, wie kann ich diese bekommen Zeichnung besser aus, so dass keine Pixel?

Ich googelte viel bei jquery canvas, aber ich kann nicht finden, wo ich suche.

Answer 1

Canvas-Zeichnung ist standardmäßig mit Anti-Aliasing versehen.

Sie zeichnen immer über Ihre vorherigen Frames.

jsFiddle (Nachweis).

Sie, dass ...

durch den Aufruf leicht beheben können

ctx.clearRect(0, 0, 200, 200); 

jsFiddle.

Dies löscht das zuvor gezeichnete 200px-Quadrat in der oberen linken Ecke.