Question

我尝试使用globalCompositeOperation来掩盖/混合形状和文本（形状蒙版/与其他形状混合使用时效果很好）时遇到问题（更具体地说，我使用的是Chrome 12.0.7）。任何人都可以建议我可能在这里误入歧途或在canvas元素中建议解决方法吗？

这是一张显示我所看到内容的图片：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>

Answer 1

似乎XOR globalCompositeOperation问题是只有fillText才会发生的Chrome错误。

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

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

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

使用HTML5的globalCompositeOperation“xor”与Chrome中的形状和文本元素

1 个答案: