扭曲的畫布邊框在chrome和Firefox中

Question

我有這個非常簡單的畫布腳本， FIDDLE HERE 。

JS代碼：

$(function() {

  var canvas = $('<canvas></canvas>').attr({
    width: 200,
    height: 200
  }).appendTo('.circle').get(0);

  var context = canvas.getContext('2d');

  context.clearRect(0, 0, 100, 100);

  context.beginPath();
  context.arc(100, 100, (200 / 2.5), Math.PI * 2, 0, false);

  context.lineWidth = 10;

  context.strokeStyle = "#eeeeee";
  context.stroke();

  context.fillStyle = "#FF0033";
  context.fill();

  var curPerc = 0;

  function drawArc(current) {
    console.log(current + ' ' + curPerc);
    context.beginPath();
    context.arc(100, 100, (200 / 2.5), 0, ((Math.PI * 2) * current), false);
    context.strokeStyle = '#9BCB3C';
    context.stroke();
    //console.log(curPerc)
    if (curPerc < 75) {
      curPerc += 1;
      requestAnimationFrame(function() {
        drawArc(curPerc / 100);
      });
    };

  }

  drawArc();

});

現在問題是圓圈看起來不太完美，邊框有點扭曲，我在最新版本的chrome（最新FF中的情況相同），下面是它的外觀：

。

這是一個已知的問題，並且有一個簡單的解決方案，這就是我想知道的。 任何幫助或建議將不勝感激。

謝謝。

Answer 1

你的問題是你總是在最后的弧上繪制相同的弧。 抗鋸齒偽像在每次繪制時累積並變得更大和更骯臟。

解決方案是在每次調用時clearRect()您的畫布。

 $(function() { var canvas = $('<canvas></canvas>').attr({ width: 200, height: 200 }).appendTo('.circle').get(0); var context = canvas.getContext('2d'); // you wil then need to redraw the full circle at every frame too var drawFull = function() { context.clearRect(0, 0, 200, 200); context.beginPath(); context.arc(100, 100, (200 / 2.5), Math.PI * 2, 0, false); context.lineWidth = 10; context.strokeStyle = "#eeeeee"; context.stroke(); context.fillStyle = "#FF0033"; context.fill(); }; var curPerc = 0; function drawArc(current) { drawFull(); context.beginPath(); context.arc(100, 100, (200 / 2.5), 0, ((Math.PI * 2) * current), false); context.strokeStyle = '#9BCB3C'; context.stroke(); if (curPerc < 75) { curPerc += 1; requestAnimationFrame(function() { drawArc(curPerc / 100); }); }; } drawArc(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="circle"> </div> 

使用此繪圖，您還可以嘗試升級畫布的寬度/高度屬性，並在使用css后縮小它：

 $(function() { var canvas = $('<canvas></canvas>').attr({ width: 400, height: 400 }).css({width:200,height:200}).appendTo('.circle').get(0); var context = canvas.getContext('2d'); // we need to change the context's scale context.scale(2,2); var drawFull = function() { context.clearRect(0, 0, 200, 200); context.beginPath(); context.arc(100, 100, (200 / 2.5), Math.PI * 2, 0, false); context.lineWidth = 10; context.strokeStyle = "#eeeeee"; context.stroke(); context.fillStyle = "#FF0033"; context.fill(); }; var curPerc = 0; function drawArc(current) { drawFull(); context.beginPath(); context.arc(100, 100, (200 / 2.5), 0, ((Math.PI * 2) * current), false); context.strokeStyle = '#9BCB3C'; context.stroke(); if (curPerc < 75) { curPerc += 1; requestAnimationFrame(function() { drawArc(curPerc / 100); }); }; } drawArc(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="circle"> </div>