javascript - 画布错误 - 在 Chrome 中不能旋转 90 度

Question

我正在尝试在画布中绘制一个旋转和缩放的圆圈。

当我将它旋转 90 度时，它不会旋转！它以 89、89.9 旋转。但不是正好 90 （编辑：在 90 +-0.013 休息，​​在 +-0.014 开始工作）。该问题仅出现在 Chrome（最新 29.0.1547.76 m）中，而 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)