帆布清除电弧

问题描述

| 如何覆盖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,Math.PI * 2,true);
      ctx.fill();

      ctx.fillStyle = \'white\';
      ctx.beginPath();
      ctx.arc(100,true);
      ctx.fill();
  </script>
  </body>
</html>

解决方法

此黑色边缘是抗锯齿的副作用。最简单的解决方案是稍微增加圆弧的半径。 , 对于这种情况，重新绘制包含弧的画布部分更为有意义。您可以使用以下方法清除画布的一部分

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

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

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

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

帆布清除清除清除电弧