Определение того, как смешиваются 2 отдельных перекрывающихся холста

Question

Я в основном хочу положить холст поверх другого и определить способ смешивания их содержимого.

У меня есть один белый холст с черными символами, и я хочу выделить его часть прозрачным синим прямоугольником, чтобы мои черные символы на фоне не стали темно-синими. На самом деле, мне нужен аспект, который я получил бы, если бы я объединил два холста с globalCompositeOperation, установленным на "умножение" вместо значения по умолчанию, сохраняя оба холста разделенными и перекрывающимися.

Вот что у меня есть:

Вот что я хочу:

Я знаю, что globalCompositeOperation позволит мне сделать это, если я объединю два полотна в один. Но я бы предпочел сохранить оба холста: мой фоновый холст отображается в виде библиотеки. Я все еще могу рисовать, но это сильно усложнит:

• Я был бы слишком зависим от их логики и должен был бы настроить мою и их логику, чтобы она работала,
• производительность имеет решающее значение, и это решение предполагает намного больше рисования на 24fps,
• Я бы боролся каждый раз, когда библиотека обновляется...

В целом, кажется, лучше избегать вмешательства в библиотеку. Есть ли способ выбрать, как будут вести себя перекрывающиеся холсты?

Заранее спасибо!

РЕДАКТИРОВАТЬ: Мы также подумали о преобразовании белых частей фонового холста в прозрачные части и добавлении нашего подсвеченного холста внизу, но это также сложно, если не невозможно.

Answer 1

Я понимаю, что у холста букв, которые рисует библиотека, непрозрачный (белый) фон, а не прозрачный?

Если это так, любые варианты применения подсветки будут относительно плохими по производительности.

Стандартное наложение холста не поможет, так как нет режима наложения, который объединяет исходные и конечные пиксели.

То, что у вас осталось, это.getImageData, чтобы получить буквы пикселей. Затем примените синие пиксели там, где они перекрывают белые пиксели, но не там, где они перекрывают черные (буквенные) пиксели.

Однако.getImageData не ускоряется графическим процессором и поэтому является относительно медленным.

Поместив синий подсвечивающий холст за непрозрачный холст с буквами, вы получите лучшую производительность.

Итог: если производительность критична и вам нужно 24+ кадров в секунду, взломайте эту библиотеку, чтобы сделать фон прозрачным, а не непрозрачным белым. (извиняюсь!)