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

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

1 голос
/ 20 июля 2011

Я столкнулся с проблемой при попытке globalCompositeOperation маскировать / смешивать фигуры и текст (маски фигур / смешанные с другими фигурами работают отлично) в Chrome (более конкретно я использую Chrome 12.0.7).Кто-нибудь может подсказать, где я мог сбиться с пути или предложить обходной путь в элементе canvas?

Вот изображение, показывающее то, что я вижу: 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>

1 Ответ

1 голос
/ 20 июля 2011

похоже, что XOR globalCompositeOperation - это хромированная ошибка, которая возникает только при fillText.

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

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

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

...