![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
16.02.2020, 23:09
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,671
|
|
Сообщение от laimas
|
Я вижу на одной из них линию шириной в 2px, а на другой четкую в 1px.
|
Не знаю об этом ли речь, да есть в canvas такая особенность c горизонтальными и вертикальными линиями, когда может образоваться тень на полпикселя, поэтому чтобы получить четкие линии для линий нечетной ширины нужно к целой позиции добавить 0.5, но по крайней мере про это хоть написано здесь. Может кстати тоже артефакты с этим связаны и нужно правильную длину круга, ширину сегментов, позицию подобрать, геморрой короче.
Последний раз редактировалось Rise, 16.02.2020 в 23:13.
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
16.02.2020, 23:44
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от Rise
|
Не знаю об этом ли речь, да есть в canvas такая особенность c горизонтальными и вертикальными линиями
|
Об этом, но еще есть и многие другие факторы которые нужно учитывать. Вообще canvas это ведь базовое, если можно так выразиться, а чтобы что-то получить стоящее нужно повозиться. Это ведь не только canvas страдает этим, взять ту же GD и сравнить с Image Magik, разница большая.
Вот картинки, пока не увеличишь, кажется что на первой 2px, а на второй 1px ширина, а огрехи просто маскируется соседним цветом и плотностью почти такой же как и линии. А рядом, для сравнения, наложил направляющие фотошопа. Если увеличить, то заметен подход в разности отрисовки линий. Плюс цвет локальный и контрастный.
Последний раз редактировалось laimas, 12.10.2020 в 16:58.
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
17.02.2020, 21:55
|
![Аватар для Malleys](https://javascript.ru/forum/image.php?u=4857&dateline=1261338679) |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
Живые примеры из постов №№2 и 7 в Chrome 80 отображаются нормально, а вот на присланных скриншотах из постов №№3 и 6 видно неточное сглаживание, очевидно у вас 1 пиксель из программы неожиданно равен пикселю на экране. «Антиалиасинг» можно отключить вообще (если не получилось настроить), тогда в браузере таких проблем не будет (правда это не вариант, если у вас пиксели размером с блюдечко!)
В Chrome 80 пример из поста №2 у меня выглядит так...
Сообщение от laimas
|
Затем на них рисуется пунктирная линия в 1px шириной в градациях серого, почти близко к белому. Вопрос - одинаково ли должна выглядеть такая линия на этих изображениях? Я вижу на одной из них линию шириной в 2px, а на другой четкую в 1px.
|
Так вы наверное на разных экранах смотрели на эту полоску. В этом нет ничего странного, в CSS пишем border-width: 1px, а на экране — 4px, так устроены современные экраны (например, Retina), вам не нужно об этом беспокоиться и вглядываться в экран через микроскоп!
try {
alert(devicePixelRatio >= 1.5 ? "Вот оно, качество!" : devicePixelRatio >= 4 ? "Оргазм от одного взгляда на экран" : "У тебя кошерные пиксели размером с блюдечко")
} catch(error) {
alert("Ты должен быть доволен тем, что твоё корыто хоть что-то показывает!");
}
Сообщение от Rise
|
В векторе такая же фигня.
|
Значит у вас devicePixelRatio === 1
Сообщение от Rise
|
Кстати, в растре также можно.
|
Сообщение от Rise
|
да есть в canvas такая особенность c горизонтальными и вертикальными линиями,
|
Вам нужно учитывать devicePixelRatio, т. е. используем каждый пиксел, (а не блоки по 2×2px, или по 3×3px или по 4×4px, как один пиксель)
<html>
<head>
<title>Canvas dashed circle</title>
</head>
<body>
<canvas width="640" height="640"></canvas>
<script>
var canvas = document.querySelector('canvas');
canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";
var scale = devicePixelRatio;
canvas.width *= scale;
canvas.height *= scale;
var ctx = document.querySelector('canvas').getContext('2d');
ctx.scale(scale, scale);
ctx.translate(320, 320);
ctx.arc(0, 0, 290, 0, 2 * Math.PI);
ctx.lineWidth = 60;
ctx.strokeStyle = "#ffbb00";
ctx.stroke();
ctx.setLineDash([1, 4]);
ctx.strokeStyle = "#000000";
ctx.stroke();
</script>
</body>
</html>
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
17.02.2020, 22:43
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от Malleys
|
Так вы наверное на разных экранах смотрели на эту полоску.
|
Конечно, у меня их как в магазине на прилавке, в ряд, ходил и смотрел на каждый. Ну что хрень пороть?
Это из редактора приготовления выделений для SVG. Эти линии ограничивают рабочую зону от края изображения равную 2 см. Оригинальное изображение конечно гораздо больше 1000 рх и с разрешением 300dpi. Оригинал при производстве может увеличиваться до 2 м, при этом граница в 2 см постоянная. В редакторе это тоже учитывается, и эти границы в нем сдвигаются к краю. Когда линия границы попадает на четный ряд, то рисуется четкая линия.
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
17.02.2020, 23:35
|
![Аватар для рони](https://javascript.ru/forum/image.php?u=7416&dateline=1372796129) |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,095
|
|
Malleys,
пост #13
devicePixelRatio = 1.25
Chrome 80
"артефакт" на 3 часа
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
17.02.2020, 23:38
|
![Аватар для рони](https://javascript.ru/forum/image.php?u=7416&dateline=1372796129) |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,095
|
|
Сообщение от Malleys
|
«Антиалиасинг» можно отключить
|
что это и как это отключается?
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
18.02.2020, 00:38
|
![Аватар для Malleys](https://javascript.ru/forum/image.php?u=4857&dateline=1261338679) |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
Сообщение от рони
|
как это отключается?
|
Это сглаживание линии на холсте, о котором шла речь в этой теме, его можно отключить, например только в браузере, если его запустить так...
Код:
|
chrome --no-first-run --no-default-browser-check --temp-profile --disable-2d-canvas-clip-aa --disable-canvas-aa --disable-composited-antialiasing |
(Картинка со сглаживаем в Ubuntu (Linux) в Chrome также с артефактом, о котором упоминали ранее в теме, но вот вариант в Chrome без сглаживания)...
Хотя вроде и не видно того артефакта... но и изображение получилось в стиле 80-х или 90-х, а вообще-то полный отстой! Может подойдёт только для вертикальных и горизонтальных линии?
Сообщение от рони
|
devicePixelRatio = 1.25
Chrome 80
"артефакт" на 3 часа
|
Я думаю, что это у вас в браузере включен зум на 125%, а так при зуме 100% у вас devicePixelRatio === 1. Даже если было бы 1.25, это всё равно мало, чтобы не было видно таких артефактов. С такими параметрами вам нужно просто смирится, что где-то линии будут с «дефектом» или «разъехалось на два пикселя»!
Сообщение от laimas
|
Конечно, у меня их как в магазине на прилавке, в ряд, ходил и смотрел на каждый. Ну что хрень пороть?
|
Достаточно двух мониторов по бокам от основного, разве нет? (Ну или одного!) В одном пишешь код, другом смотришь результат, а третий — для «видео с котиками и прочего, ну ты понял!»
Последний раз редактировалось Malleys, 18.02.2020 в 00:48.
Причина: Не заметил, что laimas написал ответ! Добавил ответ.
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
18.02.2020, 00:56
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от Malleys
|
Достаточно двух мониторов по бокам от основного ...
|
Вроде бы человек грамотный, но иногда такую пургу гонит, что уши заворачиваются. Заклинило тебя на JS и CSS что-ли и словно других понятий и не существует. Фотошоп есть? В нем достаточно сравнить, зачем мне для этого куча мониторов ... Открою маленький секрет, в GD тоже можно задать массив для точек, ожидать 1х1, а получится больше, причем тут CSS и мониторы...
Последний раз редактировалось laimas, 18.02.2020 в 00:58.
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
18.02.2020, 01:59
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,671
|
|
Malleys,
Да, devicePixelRatio равен 1, но так и не понял, как это связано, что один логический (CSS) пиксель равен одному физическому, с тем что образуются артефакты, так как твоя картинка у меня выглядит нормально. Не понятно, что мешает также нормально отрисовать это в canvas пост 7, как это отрисовано в img пост 13.
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
18.02.2020, 02:18
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,671
|
|
рони,
Антиалиасинг можно в webgl контексте отключить, а в 2d контексте вроде он как всегда включен, в svg есть атрибут shape-rendering. Я всё пробовал, сглаживание на то и сглаживание, что если его отключить, то полутени исчезнут, и останутся линии-ступеньки, Malleys ляпнул как обычно не подумав.
|
|
|
|