Рисование линии на CANVAS

[essere]

тогда еще раз: почему perpLen не определен?

Да это вечер, давно он уже определен))

[essere]

Честно говоря совсем запутался, что есть х что у, вобщем у себя менял местами, заработало. Но правда математика так и осталась загадкой.

[essere]

Да, все правильно, это меня геометрия сбила с толку, все правильно х и там и там.
Осталось смещение убрать ;]

[essere]

Дзен-трансгуманист,
Спасибо Вам ;]
Вот получилось вот такая красота:

var coords = [];
    var perps = [];

    var ctx = document.getElementById("myCanvas").getContext("2d");

        function getCoords(e)
        {

            drawCircle(e.clientX, e.clientY, 3);
                
            coords.push(e.clientX, e.clientY);

            if (coords.length === 4) {

                x1 = coords[0]; x2 = coords[2];
                y1 = coords[1]; y2 = coords[3];

                var dx = x2 - x1;
                var dy = y2 - y1;
                //var lineLen = Math.sqrt( dx * dx + dy * dy );

                var perpHalfDX = -dy / 150 * 100;
                var perpHalfDY = +dx / 150 * 100;

        
                var perpX = (x1 + x2)/2;
                var perpY = (y1 + y2)/2;

                drawLine(perpX, perpY, perpX + perpHalfDX, perpY + perpHalfDY);

                drawCircle(perpX, perpY, 3);

                //drawLine(perpX, perpY, perpX+200, perpY+200);
                drawLine(coords[0], coords[1], coords[2], coords[3]);
                coords = [];

            }
        }


    function drawLine(x_first, y_first, x_second, y_second) 
    {
        ctx.beginPath();   
        ctx.moveTo( x_first, y_first );
        ctx.lineTo( x_second, y_second );
        ctx.lineWidth = 2; 
        ctx.stroke();
    }

    function drawCircle(x, y, radius) 
    {
        ctx.beginPath();  
        ctx.arc(x, y, radius, 0, Math.PI*2, false);  
        ctx.closePath();  
        ctx.fill();  
    }

[essere]

А можно самый страшный вопрос? Вот убрал смещение перпендикуляра, теперь все классно. Нарисовал линию и теперь от ее центра пошел длинный перпендикуляр.
Если нарисовать две линии, так, чтобы перпендикуляры пересеклись, как можно найти его угол? Логически.

[essere]

сумма углов четырехугольника 360 градусов
без двух перпендикуляров остается 180
угол между линиями = 180 - угол между перпендикулярами (и наоборот)

Т.е. Я правильно Вас понял, что в расчете участвуют абсолютно все точки?
Безымянный.jpg

[essere]

Нет, только векторы самих линий.

мне лень объяснять, прошу в гугл: "угол между векторами", "векторная алгебра" и прочая-прочая

Ок спасибо, формулу найду. Посчитаю.
Кстати, а сами точки можно как то двигать? Т.е. я поставил линию, могу ли я как то одну из точек передвинуть, а не обнулять все. Как мне ее подхватить, понятно, что тут будет onmousemove событие, но как мне за существующую точку захватиться?