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