1

Chrome で、globalCompositeOperation を使用してシェイプとテキストをマスク/ブレンドしようとしたときに問題が発生しました (シェイプ マスク/他のシェイプとのブレンドは問題なく動作します) (より具体的には、Chrome 12.0.7 を使用しています)。ここで迷子になった可能性がある場所を提案したり、キャンバス要素内で回避策を提案したりできますか?

ここに私が見ているものを示す画像があります: 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>
4

1 に答える 1

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/

于 2011-07-20T09:57:43.590 に答える