Javascript Mac上Chrome的画布问题

我一直在寻找画布元素上旋转矩形的绘制、擦除和重画在mac上的google chrome中不起作用的原因

我需要这个，因为我想在画布上渲染悬停覆盖

我创建了一个代表我的代码的小提琴：

Html:

这在windows和mac上的所有浏览器中都能正常工作，除了mac上的Chrome

当我把这行注释掉的时候

// ctx.rotate(angle);

矩形在画布上绘制。（当然不轮换）

我做错什么了吗？或者这可能是Chrome中的一个bug

编辑：可能不是Chrome中的错误，因为此测试页在Mac上的Chrome中工作：

编辑2：我对此做了更多的研究，发现这个问题被记录了下来：

我在那里进行了测试，并添加了更多的测试和画布元素： 阅读这些信息，当你在较小的画布上绘制时，问题就“解决了”

请看我的小提琴演奏结果：

当我在上面的小提琴中改变画布的大小，使它们只小1像素。那么结果是好的

最后的结论：我似乎可以画一个旋转的矩形。但是当我使用clearRect方法擦除画布时，我无法再次绘制矩形。只有当画布的大小足够大时，才会发生这种情况。（大于65600px）

你们中有谁知道这个问题的解决方案，这样我就可以在mac上使用chrome在画布上绘制和重画矩形了

---

我对这件事越来越着迷了

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

从代码的角度来看，这并不完美，但从视觉上看，它看起来是一样的，应该可以解决这个bug

---

我已经修改了你的提琴来演示：

Make a，你可能会得到更多帮助。这是我当前的提琴，它还不是我想要的，因为它在其他浏览器中也有一些奇怪的行为。我会尽快做更多的工作。有什么问题吗？（您没有发布链接…）更新了问题并提供了更多信息。是的，我忘了周五的链接：请看：。它可能会解决您的问题[1]：这在我的环境中实现起来有点困难，但我认为它将来可能会派上用场。如果它在大多数版本上都能工作，那么我认为这对我的访问者来说不是什么大问题。谢谢你的解决办法。那确实是我一直在寻找的东西。

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);
}    

// ctx.rotate(angle);