画布弧清除

Ale*_*ord 6 javascript html5 canvas html5-animation

如何覆盖HTML5画布弧?我推测这段代码可以正常工作,但它留下了一个边框,尽管事实上它的值完全相同,只是一个不同的颜色..是否有一个我不知道的边界属性?

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
  <canvas id="surface" width="300" height="300"></canvas>

  <script type="text/javascript">
      var canvas = document.getElementById('surface');
      var ctx = canvas.getContext('2d');

      ctx.fillStyle = 'black';
      ctx.beginPath();
      ctx.arc(100, 100, 20, 0, Math.PI * 2, true);
      ctx.fill();

      ctx.fillStyle = 'white';
      ctx.beginPath();
      ctx.arc(100, 100, 20, 0, Math.PI * 2, true);
      ctx.fill();
  </script>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

Twe*_*e47 2

该黑边是抗锯齿的副作用。

最简单的解决方案是稍微增加圆弧的半径。