globalCompositeOperation

Question

Я пытался использовать globalCompositeOperation в цикле, передавая его по-другому строка (source-atop, source-over и т. д.) в том же 2D-контексте, но я заметил что Firefox позволил мне нарисовать только несколько фигур, в то время как Opera только последнюю.

Теперь мой вопрос: могу ли я использовать только ОДИН globalCompositeOperation во время текущий контекст?

Answer 1

Причина, по которой вы замечаете эту проблему, заключается в том, что выбранные вами режимы не поддерживаются браузером должным образом. Между браузерами существуют некоторые проблемы, связанные с globalCompositeOperation. На данный момент существует всего несколько режимов, которые работают между браузерами (Chrome / Safari / Opera / Firefox) без излишеств:

• источник-над
• источник на вершине
• назначения поверх
• назначения выход
• зажигалка
• исключающее

Чтобы узнать больше, перейдите по следующей ссылке;

http://www.rekim.com/2011/02/11/html5-canvas-globalcompositeoperation-browser-handling/

Что касается вашего второго вопроса, вы можете использовать только один режим за раз. Это прискорбно, потому что «светлые» и «темные» больше похожи на «режимы наложения», и их было бы очень полезно использовать с некоторыми другими составными режимами. Я хотел бы увидеть это изменение.

Answer 2

Короче говоря, да.

Последнее значение globalCompositeOperation имеет место перед рендерингом, например drawImage (), fillRect ().

Вы можете изменить его сразу после рисования, чтобы применить его кследующий рисунок, как:

http://jsfiddle.net/eCDRN/

ctx.globalCompositeOperation = "copy";
ctx.fillRect(100, 100, 100, 100);
ctx.globalCompositeOperation = "destination-in";
ctx.fillRect(150, 150, 100, 100);
ctx.globalCompositeOperation = "xor";
ctx.fillRect(175, 175, 100, 100);