Блог

Главная - Вопросы по программированию - Белые странные пиксели в html canvas после использования gradient fillRect с непрозрачностью несколько раз

Белые странные пиксели в html canvas после использования gradient fillRect с непрозрачностью несколько раз

#javascript #html #html5-canvas #gradient

#javascript #HTML #html5-canvas #градиент

Вопрос:

Я использовал html canvas, создавая контекстное заполнение альфа-градиентным цветом несколько раз, а затем я заметил некоторые артефакты с белыми точками, как показано на рисунке ниже.

введите описание изображения здесь
Тестирование выполнено в Chrome с Windows, с использованием графического процессора Nvidia.

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

 const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
// The context is still using default composite option: source-over
var i = 50
while (i > 0) {
  //  The gradient bound is smaller than canvas size
  const grd = ctx.createLinearGradient(
    Math.round(Math.random() * 30)   100,
    Math.round(Math.random() * 30)   100,
    Math.round(Math.random() * 100)   100,
    Math.round(Math.random() * 100)   100,
  )
  grd.addColorStop(0, '#0001')  // Alpha with about 10% opacity make this problem noticeable
  grd.addColorStop(1.0, '#fff1')
  ctx.fillStyle = grd
  ctx.fillRect(0, 0, 200, 200)
  i -= 1
} 
 <canvas id='canvas' width=200 height=200/>

Что вызывает эти белые точки на холсте?

Я что-то не так сделал в canvas? Или есть какая-то интерполяция (сглаживание) во время каждого вызова draw? Не собираюсь с этим разбираться, просто любопытно, в чем причина.

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

1. Math.random() и умножение его не даст вам целое число. Я подозреваю, что это часть этого, среди прочего округления.

2. @Brad Да, действительно. Итак, я превращаю это в функцию round, она фактически занимает положение мыши пользователя в моей работе, поэтому я предполагаю, что круглое число вызывает проблему. Обновление: проблема возникает как с плавающим, так и с круглым числом

3. Если Firefox, то точек нет, но я получаю полосатость, которую можно получить в темных градиентах из-за недостаточного количества уровней серого. В Chrome я получаю точки, но градиенты получаются немного другими.

4. Спасибо за тестирование, так что, должно быть, это какая-то проблема с рисованием, которая была реализована в браузере. И сильно сомневаюсь в сглаживании, поскольку chrome canvas по умолчанию включает сглаживание градиента.

Метки: