6

如何覆盖 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>
4

3 回答 3

3

对于这种情况，只重绘包含圆弧的画布部分会更有意义。您可以使用清除画布的一部分

ctx.clearRect(x, y, width, height);

或者为简单起见，您可以清除整个画布并完全重绘它：

ctx.clearRect(0, 0, canvas.width, canvas.height);
于 2011-10-11T21:37:44.107 回答
2

这个黑边是抗锯齿的副作用。

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

于 2011-05-30T10:23:56.937 回答
1

如果您想要类似撤消功能的功能，您可以在绘制圆弧之前将图像数据复制到交换画布。如果需要撤消，则将图像数据从交换画布复制到可见画布。

于 2011-05-30T10:26:59.253 回答