Я рисую линейные графики на холсте. Строки рисуются хорошо. График масштабируется, каждый сегмент рисуется, цвет в порядке и т.д. Моя единственная проблема - визуально ширина линии меняется. Это почти похоже на наконечник каллиграфической ручки. Если ход вверх, линия тонкая, если ход горизонтальный, линия толще.
Моя толщина линии постоянна, а мой strokeStyle установлен на black. Я не вижу никаких других свойств холста, которые влияют на такую переменную ширину линии, но должно быть.
Моя демо-версия в основном просто воссоздает то, что говорит MDN. Для равномерной ширины штриха вы можете использовать целые числа для координат, для нечетной ширины штрихов, которые вы хотите использовать .5, чтобы получить четкие линии, которые правильно заполняют пиксели.
Из статьи MDN
Если вы рассматриваете путь от (3,1) до (3,5) с толщиной линии 1.0, вы попадаете в ситуацию во втором изображении. Настоящий область, заполняемая (синяя), распространяется только на полпути в пикселях на с каждой стороны пути. Сближение этого должно быть выполнено, что означает, что эти пиксели только частично затенены, и результаты во всей области (светло-голубой и темно-синий) заполняется цвет только наполовину темный, как фактический цвет штриха. Это то, что происходит с линией ширины 1.0 в предыдущем примере кода.
Чтобы исправить это, вы должны быть очень точными в своем пути создания. Зная, что линия ширины 1,0 простирается на половину единицы на обе стороны пути, создавая путь от (3,5,1) до (3,5,5), приводит к ситуация в третьем изображении - ширина линии 1.0 заканчивается полностью и точное заполнение вертикальной линии с одним пикселем.
Попробуйте lineCap = "round" и lineJoin = "round". См. "Линейные стили" в this в PDF, чтобы увидеть, что делают эти параметры.
Редактировать 17 июля 2015 года: Великий чит-лист, но ссылка мертва. Насколько я могу судить, там есть копия в http://www.cheat-sheets.org/saved-copy/HTML5_Canvas_Cheat_Sheet.pdf.
Я просто решил проблему аналогичного характера. Это связано с ошибкой в цикле For.
ПРОБЛЕМА: я создал цикл for для создания серии связанных сегментов линии и заметил, что линия была толстой для начала, но значительно уменьшилась на конечном сегменте (градиенты явно не использовались).
FIRST, DEAD END THOUGHT: Сначала я предположил, что это проблема с вышеупомянутым пикселем, но проблема сохраняется даже после того, как все сегменты остались на постоянном уровне.
НАБЛЮДЕНИЕ: Я заметил, что я допустил ошибку новичков - я использовал только один "ctx.beginPath()" и "ctx.moveTo(posX, posY)" PRIOR для цикла For и один "ctx.stroke" () "ПОСЛЕ цикла For, и сам цикл завернул один ctx.lineTo().
РЕШЕНИЕ: Как только я переместил все методы (.beginPath(),.moveTo(),.lineTo() и .stroke()) вместе в цикл For, чтобы они все пострадали на каждой итерации, проблема исчезла, Моя соединительная линия имела желаемую однородную толщину.
Если ширина линии нечетное, просто добавьте 0.5 к x или y.