Использование HTML5 globalCompositeOperation "xor" с элементами формы и текста в Chrome

Я столкнулся с проблемой при попытке globalCompositeOperation маскировать / смешивать фигуры и текст (маски фигур / смешиваются с другими фигурами работает отлично) в Chrome (более конкретно я использую 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>
Источник

1 ответ

Решение

Похоже, что XOR globalCompositeOperation проблема хром ошибка, которая происходит только с fillText,

Другие методы рисования, кажется, работают, см. Здесь: http://jsfiddle.net/Y5wvb/

Вы должны сообщить об этой ошибке в проект Chromium: http://code.google.com/p/chromium/issues/list
Когда вы это сделаете, опубликуйте URL опубликованного номера здесь, чтобы мы могли проголосовать за него:)

Я обнаружил, что если вы измените порядок рисования, например, нарисуете текст перед заливкой прямоугольника, XOR работает просто отлично. смотрите здесь: http://jsfiddle.net/Y5wvb/1/

Источник
Другие вопросы по тегам