扭曲的画布边框在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()你的画布。

＆＃13;

＆＃13;

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

});

＆＃13;

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


</div>

＆＃13;

＆＃13;

＆＃13;

通过这张图，您还可以尝试升级您的画布＆＃39;宽度/高度属性，用css后缩小它：

＆＃13;

＆＃13;

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

});

＆＃13;

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


</div>

＆＃13;

＆＃13;

＆＃13;