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

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

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

HTML：

使用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：

编辑2：我一直在做更多的研究,我发现这个问题记录：link

我带着测试小提琴,并添加了一些旋转画布元素的测试：link

阅读那里的信息,当你在较小的画布上画画时,问题就会“解决”.

看到我的小提琴的结果：

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

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

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

我对此感到疯狂.