Должны ли режимы Canvas globalCompositeOperation работать с drawImage?

Question

Я использую globalCompositeOperation = 'copy', а затем drawImage, чтобы мое новое изображение заменяло то, что внизу.

Это прекрасно работает в последних браузерах Safari и Chrome на Mac и Windows, а также на iPad.

Он не работает в IE 9, и хотя он работает в Firefox 3.6, он не работает в Firefox 4.0.

То, что происходит, когда оно не работает, стирается весь холст, а не только область в прямоугольнике, который я передаю drawImage.

Я думаю, что это ошибка в IE 9 и Firefox 4.0, но не стоит ли ожидать, что она будет работать?

Answer 1

Когда вы используете drawImage () с globalCompositeOperation = "copy", неожиданно, что холст очищается за пределами целевого прямоугольника.Но это, похоже, консенсус о том, как интерпретировать стандарт.Даже с помощью fillRect () или при рисовании линии весь холст очищается.Вы должны установить область отсечения, чтобы предотвратить это.

Для обсуждения см .: https://bugzilla.mozilla.org/show_bug.cgi?id=366283

Answer 2

Это изображения того, что Mozilla предполагает, что Canvas должен работать:

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing#globalCompositeOperation

Проблема в том, что спецификация написана довольно расплывчатоВот.Например, для составного типа копирования это выглядит следующим образом:

Display the source image instead of the destination image.

Что может быть принято за синоним перехода от источника к источнику или может означать «очиститьвесь холст, а затем скопируйте новую операцию рисования на холст "

Чтобы увидеть, как разные браузеры различаются по своим реализациям, используйте изображения, предоставленные Mozilla выше, с этим живым срабатыванием (не изображения, холсты) всехразличные составные формы, которые также предоставляет Mozilla:

https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

Если посмотреть быстро, кажется, что Chrome 11 не согласен с Firefox 4 при входе-выходе, исходе-выходе, месте назначения-входе, destination-atop, darker, and copy.

С первого взгляда кажется, что следует отметить, что все различия связаны с тем, следует ли удалять несоответствующие пиксели или нет.Мозилла, похоже, так считает, а Google нет.