在Mac上使用Chrome浏览器时，Canvas出现问题

Question

我已经很长时间在寻找一个解释，为什么在Mac上的Google Chrome浏览器中，在画布元素上绘制、擦除和重新绘制旋转矩形不起作用。

我需要这个功能，因为我想在画布上渲染悬停叠加层。

我创建了一个Fiddle代表我的代码：链接

Html：

<canvas id="canvas"  width="400" height="165" style="left: 0px; top: 0px; background-color:red;"></canvas>

Javascript:

var canvas =null;
var ctx;
var target;

$(function() {
        canvas=document.getElementById('canvas');
        ctx = canvas.getContext('2d');
        target = { h:81, id:"i1_2", isempty:false, r:-11.64, w:60, x:143, y:19, zindex:2};
});

function drawRectangle() {
        ctx.save();
        ctx.translate(target.x, target.y);
        ctx.fillStyle = "green";
        ctx.strokeStyle = "blue";
        ctx.globalAlpha = 0.40;
        ctx.rotate(target.r / 180 * Math.PI); //NO Rotation => It works!
        ctx.fillRect(0,0,target.w,target.h);
        ctx.restore();   
}

function clearRectangle() {
    ctx.clearRect(0,0,400,165);
}    

在Windows和Mac的所有浏览器中都可以正常工作，但是在Mac上的Chrome浏览器除外。

当我注释掉这一行时：

// ctx.rotate(angle);

矩形被画在画布上。(当然没有旋转)

我做错了什么吗？还是这可能是Chrome的一个错误？

编辑：可能不是Chrome的错误，因为这个测试页面在Mac上的Chrome中可以使用：

http://www.html5canvastutorials.com/demos/advanced/html5_canvas_transform_rotate/

编辑2：我对此进行了更多的研究，并发现已经记录了这个问题：链接

我参加了那里的测试，增加了一些旋转画布元素的测试：链接。通过阅读相关信息，问题在于“当你在较小的画布上绘制时，问题‘解决’了。”

看这里，这是我的测试结果图:

当我更改上述fiddle中画布的大小，使它们小1像素时。然后结果就OK了。

最终结论：看起来我可以画一个旋转的矩形。但是当我使用clearRect方法擦除画布时，我无法再次绘制矩形。这只发生在画布的大小足够大时。(大于65600px)

你们中有谁知道这个问题的解决办法，这样我就可以在Mac上使用Chrome绘制和重新绘制画布上的矩形吗？

我对此感到非常疯狂。

- ThdK

---

创建一个 http://jsfiddle.net，你可能会得到更多的帮助。 - Alex Wayne

这是我的当前Fiddle，它还不是我想要的，因为它在其他浏览器中也有一些奇怪的行为。我会尽快对其进行更多的工作。 - ThdK

什么是？（你没有发布链接...） - Alex Wayne

更新了更多信息的问题。是的，我星期五忘记了链接 :s - ThdK

在我的OS X 10.8.2，Chrome 22.0.1229.79上，两者都能正常工作。 - Jeff

Answer 1

根据你所做的研究，你已经意识到这是一个浏览器漏洞，因此你不能自己修复它。但是，你可以通过使用相邻的较小画布来解决问题，并在每个画布上用不同的偏移量进行绘制，以便你的形状边缘对齐。

从代码的角度来看，这并不是很好，但在视觉上它看起来是一样的，而且应该可以解决问题。

我修改了你的fiddle以示范：http://jsfiddle.net/z8f2f/35/

- Kelvin

---

这在我的环境中有点难以实现，但我觉得将来可能会很有用。如果它能在大多数版本上正常工作，那对我的访问者来说应该不是个大问题。感谢您提供的解决方法。这确实是我一直在寻找的东西。 - ThdK