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

3

这显然是 Chrome（和 Canary）实现的一个错误。如果在 FireFox (Aurora) 中运行良好。在 Safari 中它很好（虽然它花了一年的时间来制作它的动画）。Opera 也很好用。

您应该从浏览器向 Google 报告错误（方法如下）：
https ://support.google.com/chrome/answer/95315?hl=en

您可以尝试此解决方案作为解决方法： 

var deg2rad = Math.PI / 180.001; //179.999

更新的小提琴包括。解决方法：http:
//jsfiddle.net/AbdiasSoftware/6ppDK/6/

Chrome 中的 arc 方法有很多问题，有些可能相关也可能不相关：
https ://code.google.com/p/chromium/issues/detail?id=245233
https://code.google.com/ p/chromium/issues/detail?id=243996
http://www.twiddla.com/test/ChromeCanvas.html

于 2013-07-09T21:04:31.320 回答