在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」

回答

相關問題