在 chrome 和 Firefox 中扭曲的画布边框答案

【问题标题】：Distorted canvas border In chrome and Firefox在 chrome 和 Firefox 中扭曲的画布边框
【发布时间】：2016-01-25 22:56:58
【问题描述】：

我有这个非常简单的画布脚本，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 中的情况相同），下面是它的外观：

。

这是一个已知问题吗，是否有一个简单的解决方法，这就是我想知道的。任何帮助或建议将不胜感激。

谢谢。

【问题讨论】：

你试过在你的`context.beginPath();'之后使用context.lineCap = 'round';吗？也只是您所指的锯齿状边缘吗？
@Canvas：我认为他更想去除锯齿状的边缘。
@Canvas ，是的锯齿状边缘 :)

标签： javascript jquery css canvas

【解决方案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>

【讨论】：