使用 HTML5 的全局CompositeOperation“xor” Chrome 中的形状和文本元素
我在 Chrome 中尝试使用 globalCompositeOperation 来遮罩/混合形状和文本（形状遮罩/与其他形状混合效果很好）时遇到了问题（更具体地说，我正在使用 Chrome 12.0.7）。任何人都可以建议我在这里可能误入歧途的地方，或者建议画布元素内的解决方法吗？
这是显示我所看到内容的图像： https://i.sstatic.net/wRunv.jpg< /a>
下面是重现这些结果的代码：
<!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>
I have run into an issue when attempting to globalCompositeOperation to mask/blend shapes and text (shapes mask/blended with other shapes works just fine) in Chrome (more specifically I am using Chrome 12.0.7). Can anyone suggest where I might have gone astray here or suggest a workaround within the canvas element?
Here is an image showing what I'm seeing: https://i.sstatic.net/wRunv.jpg
Here is the code that will reproduce these results:
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（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/
seems like the XOR globalCompositeOperation problem is a chrome bug that happens only with
fillText.Other drawing methods seem to work, see here: http://jsfiddle.net/Y5wvb/
You should report this bug to the Chromium project: http://code.google.com/p/chromium/issues/list
When you do, post the url of the posted issue here to we can vote it up :)
I found out that if you change the order of drawing, e.g. draw the text before filling the rectangle, the XOR works just fine. see here: http://jsfiddle.net/Y5wvb/1/