javascript - Mac 上 Chrome 的 Canvas 问题

Question

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

我需要这个，因为我想在 Canvas 上渲染悬停叠加层。

我创建了一个代表我的代码的 fiddle :link

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

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

当我注释掉该行时

// ctx.rotate(angle);

矩形被绘制在 Canvas 上。 (当然没有旋转)

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

编辑:可能不是 Chrome 中的错误，因为这个测试页面在 Mac 上的 chrome 中工作:

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

编辑 2:我对此进行了更多研究，发现记录了这个问题:link

我在那里测试 fiddle 并添加了一些旋转 Canvas 元素的测试:link阅读那里的信息，当您在较小的 Canvas 上绘制时，问题就“解决”了。

在这里查看我的 fiddle 结果:

当我在上面的 fiddle 中更改 Canvas 的大小时，使它们只小 1 像素。那么结果就ok了。

最终结论:看来我可以画一次旋转的矩形。但是当我使用 clearRect 方法删除 Canvas 时，我无法再次绘制矩形。只有当 Canvas 的尺寸足够大时才会发生这种情况。 (大于 65600px)

你们有没有人知道这个的解决方案，这样我就可以在 mac 上使用 chrome 在 Canvas 上绘制和重绘矩形？

我快被这个搞疯了。

Answer 1

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

从代码的 Angular 来看，它并不是很好，但在视觉上它看起来是一样的，它应该可以解决这个错误。

我修改了你的 fiddle 来演示:http://jsfiddle.net/z8f2f/35/