Javascript-форум - Canvas толщина линии

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Canvas толщина линии (https://javascript.ru/forum/misc/34133-canvas-tolshhina-linii.html)

Canvas толщина линии

Есть код:

canvas = document.getElementById("graf"); 
ctx = canvas.getContext("2d");
ctx.strokeStyle="gray";           
ctx.lineWidth=1;
ctx.beginPath();
ctx.moveTo(0, canvas.height/2);                       
ctx.lineTo(canvas.width,canvas.height/2);
ctx.closePath();

В документации сказано что "ctx.lineWidth=1;" - толщина линии в пикселях, по факту линия шириной 2 px, причем если сделать "ctx.lineWidth=2;", то толщина линии не меняется, линия просто становится ярче (при дальнейшем увеличении толщина линии увеличивается).

Я нашёл на форуме такую тему, но не могу пройти по ссылке т.к. на работе закрыты прокси)

Подскажите как сделать линию толщиной в 1 px.

Спасибо!

Пример:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <canvas id="graf" style="position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px;" width="500" height="400"></canvas>

<script style="text/javascript">
var mashtab = 12;
function initGraf() {            
            var canvas, ctx;
            canvas = document.getElementById("graf"); 
            ctx = canvas.getContext("2d");
            ctx.strokeStyle="#000";           
            ctx.lineWidth = 1;
            ctx.beginPath();
            ctx.moveTo(0, canvas.height/2);                       
            ctx.lineTo(canvas.width,canvas.height/2);
            ctx.stroke();
            ctx.closePath();
            ctx.beginPath();
            ctx.moveTo(1, 0);                       
            ctx.lineTo(1,canvas.height);
            ctx.stroke();
            ctx.closePath();
            
            ctx.strokeStyle="#000";
            ctx.beginPath();
            for (var y = canvas.height/2; y < canvas.height; y = y + mashtab) {
                ctx.beginPath();
                var tmp = Boolean(true)
                for (var x = 5; x < canvas.width;) {
                    ctx.beginPath();
                    if (tmp) {
                        ctx.moveTo(x - 6, y);
                    }
                    ctx.lineTo(x, y);
                    x = parseInt(x + 5);
                    ctx.stroke();
                    ctx.closePath();
                    if (tmp) {
                        tmp = false;
                    } else {
                        tmp = true;
                    };
                    console.log(tmp)
                }
            };
            ctx.stroke();
            ctx.closePath();
        }
initGraf();
</script>

  </body>
</html>

Почему все линии толщиной 2 px?

tsigel,
Видимая толщина в 2 пикселя происходит по причине интерполяции координат, потому что stroke обводит контур пути с обеих его сторон, т.е. половину толщины слева и половину справа. Например, ты рисуешь вертикальную линию с координатой x=100. Тогда в ширину она будет расположена между x=99.5 и x=100.5. Естественно, при этом захватывается два соседних пикселя, которые закрашиваются примерно с половинной непрозрачностью, и кажется что толщина линии равна 2. Поэтому, чтобы нарисовать линию, лежащую строго на одном пикселе, нужно использовать координаты вида N+0.5, где N - любое целое число.

<body>
<canvas id="canvas" width="200" height="200"></canvas>
<script>
var ctx = document.getElementById( "canvas" ).getContext( "2d" );
ctx.lineWidth = 1;

// размытая линия
ctx.moveTo( 50, 50 );
ctx.lineTo( 50, 150 );

// четкая линия
ctx.moveTo( 150.5, 50 );
ctx.lineTo( 150.5, 150 );

ctx.stroke();
</script>
</body>

Вообще говоря, чтобы нарисовать четкую горизонтальную или вертикальную линию, постоянная координата должна быть равна N+0.5 при нечетной толщине линии, и N - при четной толщине.

Или можно обойтись простыми прямоугольниками, рисуя линии функцией fillRect.

Дзен-трансгуманист, спасибо!

Результаты чудес канваса, ещё раз спасибо!

Вооброжаемый помошник)

l-liava-l, Вообще дурная это хрень - удаление всех постов. =\

Цитата:

Результаты чудес канваса, ещё раз спасибо!

Раньше там была интерактивная карта России... эх Это почти что первый мой ООП код.

Восстановил сообщение от Дзена, ибо больно полезная штука, не знал. Может, кому полезно будет)

Дзен-трансгуманист,
очень полезно, спасибо.

А на форуме вообще есть система закладок тем/комментов? А то уже далеко не в первый раз замечаю полезный коммент, а добавлять очередную закладку в браузер не хочется.