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)