Есть ли техническая причина, по которой метод drawImage () не выполняет субпиксельный рендеринг / сглаживание? - PullRequest
Новая
       55

Есть ли техническая причина, по которой метод drawImage () не выполняет субпиксельный рендеринг / сглаживание?

6 голосов
/ 15 июня 2011

Ttl; др: Мне нужно ОЧЕНЬ медленно перемещать изображение в canvas без явного попиксельного движения. Мне нужно какое-то сглаживание.

Недавно мне было поручено анимировать некоторые «облачные» рисунки по горизонтали на веб-странице.

Достаточно легко, я просто бросил изображение в DOM и использовал CSS3-преобразования с отступлением от анимации jQuery для браузеров, которые еще не поддерживают CSS-преобразования.

Все выглядело довольно хорошо. У меня были облака, плавно перемещающиеся по странице.

Затем я продолжал получать запросы от дизайнера, чтобы замедлить движение ... вниз.

Поскольку браузеры не выполняют субпиксельный рендеринг для объектов DOM, анимация работает со скоростью 6 FPS.

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

Моя быстрая демонстрация анимации холста (она не точно рассчитывает время движений, разберитесь с этим. :-P)

Ответы [ 6 ]

5 голосов
/ 15 июня 2011

В старых браузерах вы можете анимировать спрайт. Создайте, возможно, 4 версии вашего изображения, каждое смещенное на 0,25 пикселя влево от предыдущего. Вставьте их вместе в спрайт, а затем анимируйте фоновую позицию. 

function moveClouds(n)
{
    var v = (n % 4) * 417;
    var h = Math.ceil(n / 4);
    clouds.style.backgroundPosition = h + " " + v;
}
2 голосов
/ 15 июня 2011

Это известная проблема Chrome, которая задокументирована в http://code.google.com/p/chromium/issues/detail?id=7508

, но до сих пор нет разрешения или обходного пути ..

1 голос
/ 25 июля 2011

Здесь можно взломать хак, но это довольно уродливо.

Вы устанавливаете разрешение элемента canvas выше фактического размера экрана, а затем браузер сглаживает переводы.Тада, субпиксельная анимация в хроме!

0 голосов
/ 15 июня 2011

Все браузеры, которые я тестирую, поддерживают сглаживание на холсте, просто поместите изображение в нецелые координаты, чтобы увидеть, как это происходит. Но нет субпиксельного рендеринга (для пояснения, использующего упорядочение ЖК-дисплеев красного, зеленого и синего субпикселей для улучшения горизонтального разрешения, отлично подходит для текста.)

Согласно предварительному стандарту html5, браузер должен решить, хочет ли он делать сглаживание или нет.

0 голосов
/ 15 июня 2011

Я немного поэкспериментировал с вашим примером кода, и мне кажется, что более медленная прокрутка выглядит очень плавно: 

ctx.drawImage(img, left -= 0.0025, 0, 633, 417);

Используемый мной браузер - Chrome на Mac.

0 голосов
/ 15 июня 2011

Насколько я понимаю ... не сделано много браузерного тестирования сглаживания. Он срабатывает, когда drawImage (img1, x, y, width, height) x или y не являются целыми числами. И запускается, когда теги canvas ширина = "600" высота = "600" больше, чем стиль = "ширина: 600; высота: 600"

Установка стиля на 1/2 размера холста предполагает принудительное сглаживание. В прошлый раз я исследовал эту тему. Я бы не предположил, что браузеры будут реализовывать стандарт на 100%.

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

Обновление: На вашем примере я не получаю сглаживание с использованием Chrome. Я использую Firefox. последние выпуски обоих браузеров для Win XP. Firefox fps на вашем примере мучительно медленный.

Другое обновление Задание размера стиля холста равным 1/3 размера холста [3 пикселя холста на 1 пиксель экрана] действительно заставляет работать субпиксельный рендеринг ... но производительность может быть слишком большой, чтобы выполнить его таким образом. 

Sub-pixel canvas test.<br/>
<canvas id="canvas" width="317" height="351" 
style="border:solid 1px  #000; width:100px; height:100px"></canvas>

Извините, вы не ответили на этот вопрос.

...