HTML5 Canvas позволяет избежать субпиксельного рендеринга - PullRequest
13 голосов
/ 11 августа 2011

Как видно здесь. У меня было несколько проблем с субпиксельной точностью на холсте.Теперь у меня есть еще больше.Я пытаюсь визуализировать изометрические квадраты с жесткими краями, как показано на изображении по предоставленной мной ссылке.В попытке позже проработать данные пикселей в отрендеренном изображении и извлечь существующие цвета.

Sub Pixel

Но из-за проблемы с подпикселями у меня есть цвета, которыена самом деле не присутствует в исходном изображении!И где бы я ни начинал рисовать линию, которую вы видите на изображении (будь то от [1,1] до [10,10] или от [1,5, 1,5] до [10,5, 10,5], это простопример) Я всегда получаю эти субпиксельные цвета, которые портят мои результаты!

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

1 Ответ

11 голосов
/ 12 августа 2011

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

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

В этом вопросе о переполнении стека есть несколько советов, как избежать сглаживания в некоторых ситуациях: Можно ли отключить сглаживание для элемента HTML ?

Но единственное, что будет работать для меня, - это вручную реализовать мои собственные функции рисования, чтобы создавать нужные формы без какого-либо сглаживания.Это будет сделано с помощью функции canvas putImageData, и есть хорошее руководство прямо здесь о способах его использования.

В настоящее время нет поддерживаемого API-решения для проблемы

...