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