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

在尝试globalCompositeOperation在Chrome中更正地掩盖/混合形状和文本（形状掩码/与其他形状混合工作得很好）时遇到问题我使用Chrome 12.0.7）。任何人都可以提出我可能在这里误入歧途的地方，或者在画布元素中提出解决方法吗？在Chrome中使用带有形状和文本元素的HTML5 globalCompositeOperation“xor”

这里是一个图像显示我所看到的：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>

来源

2011-07-19 Ninx

你遇到了什么样的问题？为什么你看到的不是你想要的？ –

globalCompositeOperation的使用似乎按照Firefox和IE中的预期工作，但是在试图混合文本和形状的Chrome中似乎工作方式不同。对于特定的xor例子，与正方形重叠的文本部分应该是白色的。这可以在我原始问题中链接的图像中看到。 – Ninx

好像XOR globalCompositeOperation问题是Chrome错误这只会发生在fillText。

其它绘图方法似乎工作，在这里看到：http://jsfiddle.net/Y5wvb/

您应该这个bug报告给Chromium项目：http://code.google.com/p/chromium/issues/list
当你这样做，张贴张贴问题的URL在这里，我们可以投上一票:)

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

来源

2011-07-20 09:57:43 Variant

我已经向Chromium项目报告了这个错误：http：//code.google.com/p/chromium/issues/detail？id = 89881 非常感谢您解决此问题的方法以及介绍我到jsfiddle！ – Ninx

我的荣幸。投票支持这个bug。 – Variant

只是一个更新：错误仍然存在于当前的Firefox和Chrome中，并且由于缺乏兴趣，错误报告已关闭。 – cprn

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

回答

相关问题