Форум

Rise · #11 (**permalink**) 16.02.2020, 23:09

Сообщение от laimas

Я вижу на одной из них линию шириной в 2px, а на другой четкую в 1px.

Не знаю об этом ли речь, да есть в canvas такая особенность c горизонтальными и вертикальными линиями, когда может образоваться тень на полпикселя, поэтому чтобы получить четкие линии для линий нечетной ширины нужно к целой позиции добавить 0.5, но по крайней мере про это хоть написано здесь. Может кстати тоже артефакты с этим связаны и нужно правильную длину круга, ширину сегментов, позицию подобрать, геморрой короче.

laimas · #12 (**permalink**) 16.02.2020, 23:44

Сообщение от Rise

Не знаю об этом ли речь, да есть в canvas такая особенность c горизонтальными и вертикальными линиями

Об этом, но еще есть и многие другие факторы которые нужно учитывать. Вообще canvas это ведь базовое, если можно так выразиться, а чтобы что-то получить стоящее нужно повозиться. Это ведь не только canvas страдает этим, взять ту же GD и сравнить с Image Magik, разница большая.

Вот картинки, пока не увеличишь, кажется что на первой 2px, а на второй 1px ширина, а огрехи просто маскируется соседним цветом и плотностью почти такой же как и линии. А рядом, для сравнения, наложил направляющие фотошопа. Если увеличить, то заметен подход в разности отрисовки линий. Плюс цвет локальный и контрастный.

Malleys · #13 (**permalink**) 17.02.2020, 21:55

Живые примеры из постов №№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>

laimas · #14 (**permalink**) 17.02.2020, 22:43

Сообщение от Malleys

Так вы наверное на разных экранах смотрели на эту полоску.

Конечно, у меня их как в магазине на прилавке, в ряд, ходил и смотрел на каждый. Ну что хрень пороть?

Это из редактора приготовления выделений для SVG. Эти линии ограничивают рабочую зону от края изображения равную 2 см. Оригинальное изображение конечно гораздо больше 1000 рх и с разрешением 300dpi. Оригинал при производстве может увеличиваться до 2 м, при этом граница в 2 см постоянная. В редакторе это тоже учитывается, и эти границы в нем сдвигаются к краю. Когда линия границы попадает на четный ряд, то рисуется четкая линия.

рони · #15 (**permalink**) 17.02.2020, 23:35

Malleys,
пост #13
devicePixelRatio = 1.25
Chrome 80
"артефакт" на 3 часа

рони · #16 (**permalink**) 17.02.2020, 23:38

Сообщение от Malleys

«Антиалиасинг» можно отключить

что это и как это отключается?

Malleys · #17 (**permalink**) 18.02.2020, 00:38

Сообщение от рони

как это отключается?

Это сглаживание линии на холсте, о котором шла речь в этой теме, его можно отключить, например только в браузере, если его запустить так...

Код:

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

Конечно, у меня их как в магазине на прилавке, в ряд, ходил и смотрел на каждый. Ну что хрень пороть?

Достаточно двух мониторов по бокам от основного, разве нет? (Ну или одного!) В одном пишешь код, другом смотришь результат, а третий — для «видео с котиками и прочего, ну ты понял!»

laimas · #18 (**permalink**) 18.02.2020, 00:56

Сообщение от Malleys

Достаточно двух мониторов по бокам от основного ...

Вроде бы человек грамотный, но иногда такую пургу гонит, что уши заворачиваются. Заклинило тебя на JS и CSS что-ли и словно других понятий и не существует. Фотошоп есть? В нем достаточно сравнить, зачем мне для этого куча мониторов ... Открою маленький секрет, в GD тоже можно задать массив для точек, ожидать 1х1, а получится больше, причем тут CSS и мониторы...

Rise · #19 (**permalink**) 18.02.2020, 01:59

Malleys,
Да, devicePixelRatio равен 1, но так и не понял, как это связано, что один логический (CSS) пиксель равен одному физическому, с тем что образуются артефакты, так как твоя картинка у меня выглядит нормально. Не понятно, что мешает также нормально отрисовать это в canvas пост 7, как это отрисовано в img пост 13.

Rise · #20 (**permalink**) 18.02.2020, 02:18

рони,
Антиалиасинг можно в webgl контексте отключить, а в 2d контексте вроде он как всегда включен, в svg есть атрибут shape-rendering. Я всё пробовал, сглаживание на то и сглаживание, что если его отключить, то полутени исчезнут, и останутся линии-ступеньки, Malleys ляпнул как обычно не подумав.

Форум

Справочник

Discord чат

Курсы javascript