无法删除HTML5画布上的轮廓弧

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命令重绘路径。

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

伪影很可能是由于中风反复使用过度消除造成的。

因此...

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

如果文物不会消失，我们需要查看您的实际代码。