Что такое
ctx.mozImageSmoothingEnabled = false;
для webkit (или других браузеров)? Мне нужно, чтобы удалить сглаживание, потому что я пытаюсь получить пиксельный эффект для изображения. С сглаживанием он выглядит некачественным, но без острых краев.
Сглаживание изображения холста
Ответ 1
Для тега <canvas>, новички WebKit после r117635 и Chrome Canary 21.0.1154.0 теперь имеют атрибут webkitImageSmoothingEnabled. (Обратите внимание, что это относится только к <canvas>, а не к элементам HTML в целом.)
Ответ 2
Если вы хотите нарисовать фигуру без гладких краев, попробуйте использовать половинные пиксели по координатам.
Представьте себе каждый пиксель как большой квадрат. Координаты целого числа (0, 1, 2...) являются ребрами квадратов. Если вы нарисуете единую единицу линии между целыми численными координатами, он будет перекрывать противоположные стороны квадрата пикселя, и результирующая линия будет нарисована двумя пикселями широкий. Чтобы нарисовать линию шириной всего в один пиксель, вам нужно сдвинуть координаты на 0,5 перпендикулярно направлению линии.
Например, если вы попытаетесь нарисовать линию от (1, 0) до (1, 3), браузер будет рисовать линию, покрывающую 0,5 пикселя экрана по обе стороны от х = 1. Экран не может отображать половину пикселя, поэтому он расширяет линию до охватывают в общей сложности два пикселя:
Но если вы попытаетесь нарисовать строку из (1.5, 0) в (1.5, 3), браузер будет нарисовать линию, покрывающую 0,5 пикселя экрана по обе стороны от x = 1,5, что приводит к истинной ширине в 1 пиксель:
Источник: http://diveintohtml5.info/canvas.html
Ответ 3
AFAIK пока еще нет. Вы можете получить тот же эффект, что и пиксельный пиксель, но с большим количеством работы (эй, не так уж много, если это что-то вроде строк).
Ответ 4
Быстрый просмотр ссылки, о которой сообщает Stephan ниже, показывает следующее обновление этой проблемы в отслеживателе ошибок:
Предложенное значение для оптимизированного контраста изображения CSS3 было реализовано как "-webkit-optimize-contrast" в ошибке 56627. Прямо сейчас в WebKit, используя это, вы получите интерполяцию ближайшего соседа.
Таким образом, настройка CSS -webkit-optimize-contrast выглядит как ответ.
Ответ 5
Существует (почти год) отчет об ошибке в webkit об этом. Еще одна возможность - создать ваше пиксельное искусство в более высоких разрешениях и уменьшить их. Это, вероятно, принесет лучшие результаты, чем увеличение, но будет сочетаться с более высокими требованиями к трафику.
Ответ 6
Разверните X и Y перед тем, как показывать свои изображения на экране.
Если вы рисуете изображения на субпикселях, некоторые браузеры будут пытаться сгладить его перед показом изображения.
Более быстрый способ сделать это - двоичный OR с нулем.
myObject.X = myObject.X | 0;
Для более глубокого объяснения прочитайте в этой статье:
http://sebleedelisle.com/2011/02/html5-canvas-sprite-optimisation/
И вот тест jsperf по методам округления: