5

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

我需要这个，因为我想在画布上呈现悬停覆盖。

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

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 像素。然后结果就ok了。

好结果

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

你们有谁知道这个解决方案，所以我可以在 Mac 上使用 chrome 在画布上绘制和重绘矩形？

我快疯了。

4

1 回答 1

1

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

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

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

于 2012-10-15T02:28:51.777 回答