HTML5 globalCompositeOperation против клипа

Question

У меня большое исходное изображение, и я хочу отобразить его небольшую часть внутри круга, оставив часть холста вне круга прозрачной.

Руководство Mozilla по композитингу с HTML5 охватывает две темы: globalCompositeOperation и clip. Похоже, что оба позволят мне делать то, что я хочу, поэтому мне интересно, каковы недостатки каждого из них, и что я должен использовать.

Я мог бы установить globalCompositeOperation на source-atop (или source-in, но этот кажется некорректным в WebKit ). Затем сделайте холст назначения прозрачным с черным кружком и просто нарисуйте исходное изображение поверх него. Это обеспечит заполнение только части круга.

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

1. Будут ли оба эти метода работать так, как я говорю, или я что-то упустил?
2. Если да, то есть ли какие-то серьезные проблемы с одним из этих методов, которые делают одно явно лучше другого?
3. Если нет, то какой из них имеет лучшую производительность в целом?

Я бы (чисто умозрительно) предположил, что globalCompositeOperation будет иметь лучшую производительность, поскольку он применяет операцию на уровне пикселей, тогда как операция clip должна выполнять пересечение полигонов. Но это всего лишь догадка.

Answer 1

По состоянию на март globalCompositeOperation не работал одинаково во всех браузерах.

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

На мой взгляд, здесь уместно использовать клип.Использование source-atop может работать для вашей конкретной ситуации, но оно не очень расширяемо, как вы его описали.Если вы когда-нибудь захотите изменить что-либо из этого, например, иметь фон за своим кругом, у вас возникнут проблемы, если вы сделаете это способом globalComposite.

И тесты состоят в следующем: клип работает быстрее в каждомБраузер, который я тестировал, и значительно быстрее в Firefox.Посмотрите результаты или попробуйте сами здесь