2013-02-20 4 views
2

Ну, если я нарисую строку с нечетным значением lineWidth в HTML5 Canvas Я получаю размытую линию, и я знаю причину этой проблемы.Ширина линии в холсте

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

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

Позвольте мне знать, если какие-либо другие, кроме выше

+0

Возможный дубликат [Рисование линий в холсте, но последние выцветшие] (http://stackoverflow.com/questions/10373695/drawing-lines-in-canvas-but-the-last-ones-are- faded) –

+0

SVG позволяет вам установить режим рендеринга crispEdges; к сожалению, невозможно для холста: http://stackoverflow.com/questions/11353499/svg-canvas-shape-rendering-crispedges-via-javascript –

+0

Я не должен использовать SVG ... –

ответ

3

К счастью (и к сожалению) решения вы правильно реализованы «пиксель-защелкивание», когда вы добавляете/вычитать .5 пикселей, чтобы получить свои линии, чтобы выровнять с границами пикселей , В отличие от Photoshop, нет возможности автоматически привязывать пиксель к холсту. ...Я чувствую твою боль!

+0

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

Смежные вопросы