我一直在寻找很长一段时间,因为画布元素上的旋转矩形的绘制,擦除和重绘在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在画布上绘制和重绘矩形?
我对此感到疯狂.