Javascript 使用HTML5'；s globalCompositeOperation“；“异或”；在Chrome中使用形状和文本元素_Javascript_Xor_Html5 Canvas_Globalcompositeoperation

Javascript 使用HTML5'；s globalCompositeOperation“；“异或”；在Chrome中使用形状和文本元素

javascript html5-canvas

Javascript 使用HTML5'；s globalCompositeOperation“；“异或”；在Chrome中使用形状和文本元素,javascript,xor,html5-canvas,globalcompositeoperation,Javascript,Xor,Html5 Canvas,Globalcompositeoperation,我在尝试在Chrome中使用GlobalComposite操作屏蔽/混合形状和文本（形状屏蔽/与其他形状混合效果很好）时遇到了一个问题（更具体地说，我使用的是Chrome 12.0.7）。有人能建议我在这里可能误入歧途的地方，或者在canvas元素中建议一种解决方法吗这是一张我看到的图片：下面是重现这些结果的代码： <!DOCTYPE HTML> <html> <body> <canvas id="testCanvas" width="500"

我在尝试在Chrome中使用GlobalComposite操作屏蔽/混合形状和文本（形状屏蔽/与其他形状混合效果很好）时遇到了一个问题（更具体地说，我使用的是Chrome 12.0.7）。有人能建议我在这里可能误入歧途的地方，或者在canvas元素中建议一种解决方法吗

这是一张我看到的图片：

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

<!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>


//设置画布
var tcanvas=document.getElementById（“testCanvas”）；
var tcontext=tcanvas.getContext（“2d”）；
//画正方形
tcontext.fillStyle=“#FF3366”；
t上下文fillRect（15,15,70,70）；
//集合复合属性
tcontext.globalCompositeOperation=“xor”；
//绘制文本
tcontext.fillStyle=“#0099FF”；
tcontext.font=“35px无衬线”；
tcontext.fillText（“测试”，22,25）；

似乎XOR GlobalComposite操作问题是一个chrome bug，它只发生在

fillText

上

其他绘图方法似乎可行，请参见此处：

您应该向Chromium项目报告此错误：
当您这样做时，请将发布问题的url发布到此处，我们可以对其进行投票：）

我发现如果你改变了绘图的顺序，比如在填充矩形之前先画文本，那么XOR就可以正常工作。请参见此处：

似乎XOR GlobalComposite操作问题是一个chrome bug，它只在

fillText

中出现

其他绘图方法似乎可行，请参见此处：

您应该向Chromium项目报告此错误：
当您这样做时，请将发布问题的url发布到此处，我们可以对其进行投票：）

我发现如果你改变了绘图的顺序，比如在填充矩形之前先画文本，那么XOR就可以正常工作。请参见此处：

您遇到了什么样的问题？为什么你看到的不是你想要的呢？globalCompositeOperation的使用似乎在Firefox和IE中起到了预期的作用，但是在Chrome中，试图混合文本和形状的工作方式似乎有所不同。对于特定的xor示例，文本中与正方形重叠的部分应为白色。这可以从我在原始问题中链接的图片中看到。你遇到了什么样的问题？为什么你看到的不是你想要的呢？globalCompositeOperation的使用似乎在Firefox和IE中起到了预期的作用，但是在Chrome中，试图混合文本和形状的工作方式似乎有所不同。对于特定的xor示例，文本中与正方形重叠的部分应为白色。这可以在我在原始问题中链接的图片中看到。我已经向Chromium项目报告了这个bug，可以在这里找到：非常感谢您在这个问题上的解决方法，以及向我介绍JSFIDLE！更新：该漏洞仍然存在于当前的Firefox和Chrome中，并且由于缺乏兴趣，该漏洞报告已经关闭。我已经向Chrome项目报告了该漏洞，可以在这里找到：非常感谢您在这方面的解决方法以及向我介绍JSFIDLE！只是一个更新：该漏洞仍然存在于当前的Firefox和Chrome中，由于缺乏兴趣，该漏洞报告已经关闭。