画布清弧

发布于 2024-11-10 10:51:46 字数 725 浏览 1 评论 0原文

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

How do I overwrite an HTML5 canvas arc? I presumed this code would work but it leaves a border around it despite the fact that its exactly the same values and just a different colour.. Is there a border property I'm missing??

<!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>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

塔塔猫 2024-11-17 10:51:46

对于这种情况,重新绘制包含圆弧的画布部分更有意义。您可以使用以下命令清除画布的一部分

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

,或者为了简单起见,您可以清除整个画布并完全重新绘制它:

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

for this situation, it makes more sense to just redraw the the portion of the canvas that contained the arc. You can clear a section of the canvas with

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

or for simplicity you could just clear the entire canvas and redraw it completely:

ctx.clearRect(0, 0, canvas.width, canvas.height);
本王不退位尔等都是臣 2024-11-17 10:51:46

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

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

This black edge is a side affect of anti-aliasing.

The easiest solution is to increase the radius of the arc slightly.

擦肩而过的背影 2024-11-17 10:51:46

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

In case you want something like undo feature you could copy the image data to a swap canvas before the arc drawing. Then copy the image data from swap canvas to the visible one if the undo is required.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文