HTML5 Canvas и Line Width

Question

Я рисую линейные графики на холсте.Линии рисуют хорошо.График масштабируется, каждый сегмент рисуется, цвет в порядке и т. Д. Моя единственная проблема - визуально ширина линии меняется.Это почти как перо для каллиграфии.Если ход вверх, линия тонкая, если ход горизонтальный, линия толще.

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

Answer 1

Демонстрация в реальном времени

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

С Статья MDN

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

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

Answer 2

Если ширина линии нечетное число, просто добавьте 0,5 к x или y.

Answer 3

Я только что решил проблему подобного характера.Это включало ошибку в цикле For.

ПРОБЛЕМА: Я создал цикл for для создания серии соединенных отрезков линии и заметил, что линия была толстой для начала, но значительно утончалась к последнему сегменту (нетбыли явно использованы градиенты).

ПЕРВЫЕ, МЕРТВЫЕ КОНЕЦ МЫСЛИ: Сначала я предположил, что это была проблема с пикселями выше, но проблема сохранялась даже после того, как все сегменты оставались на постоянном уровне.1006 * НАБЛЮДЕНИЕ: я заметил, что сделал ошибку новичка - я использовал только один «ctx.beginPath ()» и «ctx.moveTo (posX, posY)» ДО цикла «For» и один «ctx.stroke () "ПОСЛЕ цикла For и самого цикла, обернутого в один ctx.lineTo ().

РЕШЕНИЕ: Как только я переместил все методы (.beginPath (), .moveTo (), .lineTo () и .stroke ()) вместе в цикл For, чтобы они все попадали на каждой итерации,проблема ушлаМоя подключенная линия имела желаемую равномерную толщину.

Answer 4

Попробуйте lineCap = "round" и lineJoin = "round". См. «Стили линий» в этом PDF, чтобы узнать, что делают эти параметры.

---

Редактировать 17-июль-2015 : Отличная шпаргалка, но ссылка не работает. Насколько я могу судить, его копия находится по адресу http://www.cheat -sheets.org / save-copy / HTML5_Canvas_Cheat_Sheet.pdf .