Mac上的Chrome浏览器出现问题

Question

我一直在寻找很长一段时间,因为画布元素上的旋转矩形的绘制,擦除和重绘在Mac上的谷歌浏览器中不起作用.

我需要这个,因为我想在画布上渲染悬停叠加层.

我创建了一个代表我的代码的小提琴:链接

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:我一直在做更多的研究,我发现这个问题记录:链接

我带着测试小提琴,并添加了一些旋转画布元素的测试:链接 阅读信息,当你在较小的画布上绘制时问题是"解决".

看到我的小提琴的结果:

当我改变上面小提琴画布的大小时,使它们只小1像素.然后结果还可以.

最后的结论:似乎我可以画一次旋转的矩形.但是当我使用clearRect方法擦除画布时,我无法再次绘制矩形.仅当画布的大小足够大时才会发生这种情况.(大于65600px)

你有没有人知道这个解决方案所以我可以使用Chrome上的chrome在画布上绘制和重绘矩形？

我对此感到疯狂.

Answer 1

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

从代码的角度来看，这并不完全好，但从视觉上看，它看起来是一样的，并且应该可以解决该错误。

我修改了你的小提琴来演示：http://jsfiddle.net/z8f2f/35/