Сглаживание изображения холста

Question

Что такое

ctx.mozImageSmoothingEnabled = false;

для webkit (или других браузеров)?Мне нужно, чтобы удалить сглаживание, потому что я пытаюсь получить пиксельный эффект для изображения.Сглаживание выглядит плохо, но без острых краев.

Answer 1

Для тега <canvas> ночные WebKit после r117635 и Chrome Canary 21.0.1154.0 теперь имеют атрибут webkitImageSmoothingEnabled. (Обратите внимание, что это относится только к <canvas>, а не к элементам HTML в более общем плане.)

Answer 2

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

Представьте каждый пиксель как большой квадрат. Целочисленные координаты (0, 1, 2 ...) - края квадратов. Если вы рисуете одну единицу шириной линия между целыми числами координат, она будет перекрывать противоположные стороны квадрата пикселей, и результирующая линия будет нарисована двумя пикселями широкий. Чтобы нарисовать линию шириной всего в один пиксель, нужно сдвинуть координаты на 0,5 перпендикулярно направлению линии.

Например, если вы попытаетесь нарисовать линию от (1, 0) до (1, 3), браузер нарисует линию, покрывающую 0,5 пикселя экрана по обе стороны от х = 1. Экран не может отображать половину пикселя, поэтому он расширяет строку до покрыть всего два пикселя:

Но, если вы попытаетесь нарисовать линию от (1,5, 0) до (1,5, 3), браузер нарисует линию, покрывающую 0,5 пикселя экрана по обе стороны от х = 1,5, в результате получается линия шириной в 1 пиксель:

Источник: http://diveintohtml5.info/canvas.html

Answer 3

Беглый взгляд на ссылку, указанную Стефаном ниже, показывает следующее обновление для этой проблемы на трекере ошибок:

Предлагаемое значение для CSS3 рендеринга изображений «optimize-контраст» было реализовано как «-webkit-optimize-контраст» в ошибке 56627. Прямо сейчас в WebKit, используя это, вы получите интерполяцию ближайшего соседа.

Так что настройка CSS -webkit-optimize-contrast выглядит как ответ.

Answer 4

AFAIK пока нет. Вы можете получить тот же эффект, рисуя то, что вы хотите, попиксельно, но с большим количеством работы (эй, не так много, если это что-то вроде линий).

Answer 5

Округлите X и Y, прежде чем показывать изображения на экране.

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

Более быстрый способ сделать это - двоичный файл OR с нулем.

myObject.X = myObject.X | 0;

Для более глубокого объяснения, прочитайте эту статью:

http://sebleedelisle.com/2011/02/html5-canvas-sprite-optimisation/

А вот тест jsperf по методам округления:

http://jsperf.com/math-floor-vs-math-round-vs-parseint/5

Answer 6

Существует (почти год) сообщение об ошибке в webkit по этому поводу. Еще одна возможность - создать пиксельную графику в более высоком разрешении и уменьшить ее. Это, вероятно, даст лучшие результаты, чем увеличение, но будет сочетаться с более высокими требованиями к трафику.