画布圆弧清理答案

【问题标题】：Canvas arc clearing画布圆弧清理
【发布时间】：2011-09-04 17:25:22
【问题描述】：

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

【问题讨论】：

只是出于好奇，这比使用 ctx.clear() 快吗？
不是真的，我最终重组了使用标准更新/绘制周期渲染的格式。作为抽奖的一部分，我使用了 ctx.clear() 并且工作得更快。
ctx.imageSmoothingEnabled= false;

标签： javascript html canvas html5-animation

【解决方案1】：

对于这种情况，重新绘制包含弧线的画布部分会更有意义。您可以使用

清除画布的一部分

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

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

ctx.clearRect(0, 0, canvas.width, canvas.height);

【讨论】：

实际上并没有，因为我在每一帧上都有很多球，我要多次清除和绘制。现在我只清除一次并重绘多个。虽然我清除的区域更大，但您从删除计算中获得的好处超过了这个，它实际上是一个更快的负载。
很公平，正如我所提到的，在这种情况下，您应该继续使用 ctx.clearRect(0, 0, canvas.width, canvas.height) 清除整个画布。您也可以考虑使用分层，并为屏幕上的每个球设置一个画布元素。这样，您一次只需要清除和重绘一个球，而不是整个场景。

【解决方案2】：

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

【讨论】：

我正在做一个简单的球碰撞问题，认为在每个球移动时覆盖它会更容易，但遇到了这个问题。我认为我不需要更复杂的东西，但无论如何谢谢:)
啊，我明白了。那么你最好为每一帧重新绘制整个场景。查看一些 JS 和 Canvas 游戏教程以获取示例。

【解决方案3】：

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

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

【讨论】：

嗯，有没有我可以设置的标志来关闭它？
其实看到这个：stackoverflow.com/questions/195262/…
显然不是stackoverflow.com/questions/195262/… 除非您使用自己的 arc 函数来绘制单个像素
ctx.imageSmoothingEnabled= false;