3

フィドル、 重要なものだけに絞り込もうとしました。オフセットで達成された272度のキャンバスアークがあります。緑のアニメーションの円弧が 135 度に達すると、Chrome や他のブラウザーでは次のようになります。

ここに画像の説明を入力

通常、入力された値は正確ではないため、グリッチを非常に速くスキップします。でも、それを完全に取り除くことができたら、本当に素晴らしいことです。私はキャンバスにかなり慣れていないので、何を試したらよいかわかりません。ありがとう！！

関連する JS:

function setGauge(valForGauge, val, distance){
    var time = 500; 
    time = time / (Math.abs(valForGauge - preValForGauge));

    if (valForGauge > preValForGauge) {
        var animate = setInterval(function(){
            if (preValForGauge == valForGauge)
                clearInterval(animate);
            else {
                preValForGauge++;
                drawValueArc(preValForGauge);              
            }
        }, time);
    } else if (valForGauge < preValForGauge) {
        var animate2 = setInterval(function(){
            if (preValForGauge == valForGauge)
                clearInterval(animate2);
            else {
                preValForGauge--;
                drawValueArc(preValForGauge);
            }
        }, time);
    } else if (valForGauge == 0 || valForGauge == preValForGauge) {
        preVal = val;
    }
}

function drawValueArc(val) {
    drawArc(ctx2, 57, 32, "rgb(230, 230, 230)", startRadians, endRadians);
    drawArc(ctx2, 57, 31, "#27AE60", startRadians, val);
}

function drawArc(ctx, radius, width, color, start, end) {
    ctx.beginPath();
    ctx.arc(cx, cy, radius, (startRadians + offset) * deg2rad, (end + offset) * deg2rad, false);
    ctx.strokeStyle = color;
    ctx.lineWidth = width;
    ctx.stroke();
4

1 に答える 1