Canvas bug - 在Chrome中沒有旋轉90度

Question

我正在嘗試在畫布上繪制一個旋轉和縮放的圓圈。

當我將其旋轉90度時，它不會旋轉！ 它旋轉89,99.9。 但不完全是90（ 編輯：90 + -0.013處的中斷，開始工作在+ -0.014 ）。 該問題僅出現在Chrome（最新29.0.1547.76米）中，而Firefox和IE工作正常。

c.save();
    c.translate(100, 100);
    r += 5;
    c.rotate(r * inRads);   // when r = 90, it renders as if r = 0
    c.scale(1, 2);

    c.beginPath();
    c.arc(0, 0, 20, 0, 2*Math.PI);
    c.closePath();
    c.fillStyle = '#f00';
    c.fill();
c.restore();

這是GIF的外觀：

請看這里轉載的問題： http ： //jsfiddle.net/qeWcE/1/ 現在修復了。

這有解決方法嗎？

Answer 1

這似乎有助於：

// fixes bug when r = (90 +-0.013) jumps to r = 0
function chrome_fix_rotation_bug(r)
{
    var rr = Math.round(r);
    if (Math.abs(rr-r) < 0.02 && rr%90==0) return rr+0.02;
    return r;
}

// use like this:
r = chrome_fix_rotation_bug(r);
c.rotate(r * inRads)