Chromeのシェイプとテキスト要素でHTML5のglobalCompositeOperation "xor"を使用する

Googleでは、globalCompositeOperationを使用してシェイプとテキストをシェイプ/ブレンドする際に問題が発生しました。私はChrome 12.0.7を使用しています）。誰かが私がここで迷子になっているかもしれないと示唆したり、キャンバス要素内で回避策を提案することはできますか？ここでhttp://i.stack.imgur.com/wRunv.jpg Chromeのシェイプとテキスト要素でHTML5のglobalCompositeOperation "xor"を使用する

これらの結果を再現するコードされています：XOR globalCompositeOperationの問題は、クロームのバグであるよう

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

は思わここ

は、私が見ているものを示した画像ですそれはfillTextでのみ発生します。

他の描画方法はこちらを参照してください動作するようです：http://jsfiddle.net/Y5wvb/

あなたはクロムプロジェクトにこのバグを報告する必要があります：私たちはそれを投票することができにあなたは、ここに掲載問題のURLを投稿しないときhttp://code.google.com/p/chromium/issues/list
:)

図面の順序を変更すると、たとえば長方形を塗りつぶす前にテキストを描画すると、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

私の喜び。バグのために投票した。 – Variant

ちょうどアップデート：現在のFirefoxとChromeにはまだバグが残っており、興味がないためにバグレポートが閉じられています。 – cprn

Chromeのシェイプとテキスト要素でHTML5のglobalCompositeOperation "xor"を使用する

答えて

関連する問題