javascript - 无法删除 HTML5 canvas arc 上的轮廓

Question

我正在尝试使用 HTML5 Canvas Arc 制作一种进度条。

我遇到的问题是我的圆弧周围有一个黑色轮廓，我无法更改其颜色。下图显示了我的意思。

我使用的代码如下。

function drawArmor( percent ) {
    var canvas = document.getElementById('ArmorCanvas');
    var context = canvas.getContext('2d');
    var radius = 36;
    var startAngle = (3 * Math.PI) / 2;
    var percentLeft = 1;
    var endAngle = -(Math.PI/2) + (Math.PI * 2 ) * ( 1 - percent );

    context.clearRect(0, 0, canvas.width, canvas.height);
    context.lineWidth = 1;
    context.lineCap = 1;
    context.strokeStyle = '#FFF';
    context.arc(100, 100, radius, startAngle, endAngle, true);
    context.stroke();
}

function drawHealth( percent ) {
    var HealthText = document.getElementById( "HealthText" );
    HealthText.innerHTML = ( percent * 100 ) + "%";

    var canvas = document.getElementById('HealthCanvas');
    var context = canvas.getContext('2d');
    var radius = 26;
    var startAngle = (3 * Math.PI) / 2;
    var endAngle = -(Math.PI/2) + (Math.PI * 2 ) * ( 1 - percent );

    context.clearRect(0, 0, canvas.width, canvas.height);
    context.lineWidth = 1;
    context.lineCap = 1;
    context.strokeStyle = '#00FE67';
    context.arc(100, 100, radius, startAngle - 0.00001, endAngle + 0.00001, true);
    context.stroke();
}

感谢任何帮助，谢谢。

Answer 1

哎呀？

您提供的代码不会绘制您提供的图像，因此我假设您使用的是导致环形伪影的不同代码。

无论如何!

我确实看到您没有以 beginPath 开始您的路径命令(您的 context.arc 是一个路径命令)。

缺少 beginPath 会导致使用每个新的 context.stroke 命令重新绘制路径。

过度绘制的累积会导致您描述的那种伪像。

伪影可能是由于笔划上的抗锯齿重复 overdraw 造成的。

所以...

将 context.beginPath 放在 context.arc 命令之前，工件可能会消失。

如果工件没有消失，我们将需要查看您的实际代码。