1

当我尝试在 Chrome 中使用 globalCompositeOperation 来遮罩/混合形状和文本（形状遮罩/与其他形状混合效果很好）时遇到了一个问题（更具体地说，我使用的是 Chrome 12.0.7）。谁能建议我在这里可能误入歧途的地方或在画布元素中建议一种解决方法？

这是显示我所看到的图像：http: //i.stack.imgur.com/wRunv.jpg

下面是重现这些结果的代码：

<!DOCTYPE HTML>
<html>
<body>

<canvas id="testCanvas" width="500" height="500"></canvas>

<script type="text/javascript">
    // setup canvas
    var tcanvas = document.getElementById("testCanvas");
    var tcontext = tcanvas.getContext("2d");

    // draw square
    tcontext.fillStyle = "#FF3366";
    tcontext.fillRect(15,15,70,70);

    // set composite property
    tcontext.globalCompositeOperation = "xor";

    // draw text
    tcontext.fillStyle="#0099FF";
    tcontext.font = "35px sans-serif";
    tcontext.fillText("test", 22, 25);
</script>

</body>
</html>
4

1 回答 1

1

似乎 XOR globalCompositeOperation 问题是一个 chrome 错误，只发生在fillText.

其他绘图方法似乎有效，请参见此处：http: //jsfiddle.net/Y5wvb/

您应该将此错误报告给 Chromium 项目：http
://code.google.com/p/chromium/issues/list 当您这样做时，在此处发布已发布问题的 url，我们可以投票 :)

我发现如果你改变绘图的顺序，例如在填充矩形之前绘制文本，XOR 工作得很好。见这里：http: //jsfiddle.net/Y5wvb/1/

于 2011-07-20T09:57:43.590 回答