Css canvas 圆形笔划清晰度

Question

我的音频播放器上有一个圆圈搜索栏，它在计时器间隔内绘制 Canvas 圆圈。问题是，当 Canvas 被重新绘制时，它会失去清晰度。代码，当canvas被绘制一次后，正常的圆圈如下:

https://jsfiddle.net/0zs2gqxk/

fiddle中的相关代码如下

for (var i = 0; i < 1; i++) {
  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  context.lineWidth = 5;
  context.strokeStyle = '#0000ff';
  context.stroke();
}

此处重绘 50 次以显示问题:

https://jsfiddle.net/4bf9ka49/

在第二个例子中边缘变得丑陋。有没有办法避免这种情况？

Answer 1

将 context.clearRect(0, 0, canvas.width, canvas.height) 添加到您的代码中以清除 Canvas ，因此它不会在同一位置创建多个。

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;

for (var i = 0; i < 50; i++) {

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

  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

  context.lineWidth = 5;
  context.strokeStyle = '#0000ff';
  context.stroke();
  context.clearRect(0, 0, canvas.width, canvas.height);
}

这是你分享的第一个 JSFiddle 的图片，还有我的 code's图像。

相同。