Css帆布圆圈笔划清晰度

Question

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

https://jsfiddle.net/0zs2gqxk/

小提琴中的相关代码位于

之下

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)添加到代码中以清除画布，因此它不会在同一位置生成多个。

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图片的图片。

相同。