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 に答える