Как очистить холст HTML5 прозрачным белым цветом?

#html5-canvas #webgl #babylonjs

#html5-холст #webgl #babylonjs

Вопрос:

Я искал повсюду и, похоже, не могу найти ответ на этот вопрос.

Я пытаюсь нарисовать белый текст с белым сглаживанием.

Я пробовал эти два:

  1. fillRect с помощью rgba(255, 255, 255, 0) <- это, кажется, ничего не делает, все еще черный АА
  2. fillRect с помощью rgba(255, 255, 255, 0.01) <- дает белый АА, но не полностью прозрачный

Как я могу это сделать?

Комментарии:

1. Белый текст с белым сглаживанием? Что это вообще значит? Два способа сделать сглаженный текст — это субпиксельный рендеринг (смещение каналов rg и b) или прозрачность. И да, все прозрачные пиксели преобразуются в прозрачно-черные в холсте.

2. @Kaiido Пиксели сглаживаются между прозрачно-черным и сплошным белым текстом, вызывая визуальные артефакты при сглаживании, Пример: рендеринг белого текста на черно-прозрачном холсте, на белой фоновой HTML-странице, вы можете видеть контур текста из-за сглаживания сплошного белого с прозрачно-черным. Я хочу, чтобы сглаживание из сплошного белого в бело-прозрачное.

3. Итак, вы говорите, что в этой скрипке вы видите артефакты? Это было бы ошибкой браузера.

4. @Kaiido Хорошо, это немного сложнее, чем я думал. Я использую BabylonJS, который использует HTML canvas под капотом для рендеринга текста. Поскольку текстура в конечном итоге визуализируется с помощью WebGL, она представляет собой линейное смешивание сглаженных белых пикселей с черно-прозрачными пикселями рядом с ними. Видишь pasteall.org/media/8/f/8f4ec476e7267b529b8c1fe3c8e60c3d.png Что мне нужно, так это очистить холст с помощью white-transparent, чтобы пиксели рядом с белыми пикселями с псевдонимами были бело-прозрачными.

5. Так что это становится проблемой [webgl]. Покажите свой код, если вам нужна помощь.