0

В canvas ставлю две точки рисуется прямая нужно ее продолжить.

прямая которую рисую я

продолжение линии

должно получиться как то так

Как так сделать?

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
let w = canvas.width;
let h = canvas.height;
Grid();
function Grid() {
ctx.strokeStyle = "black";
ctx.beginPath();

ctx.lineWidth = "5";
ctx.moveTo(0, h);
ctx.lineTo(0, 0);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, h);
ctx.lineTo(w, h);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = "1";
const n = 50;
let a = 0;
let b = 0;
let i = 0;

while (a < w - 50) {
    i++;
    ctx.beginPath();
    ctx.moveTo(n * i, 0);
    ctx.lineTo(n * i, h);
    ctx.stroke();
    a += n;
}
i = 0;
while (b < h - 50) {
    i++;
    ctx.beginPath();
    ctx.moveTo(0, n * i);
    ctx.lineTo(w, n * i);
    ctx.stroke();
    b += n;
}
}
ctx.lineCap = "square";
let  flag = true;
let counter = 0;
let x = new Array(30);
for (var i = 0; i < x.length; i++) {
 x[i] = new Array(2);
}
for (var i = 0; i < x.length; i++) {
 for (var j = 0; j < 2; j++) {
    x[i][j] = 0;
 }
}
function point(x, y) {
 ctx.fillStyle = 'green';
 ctx.arc(x, y, 4, 0, 2 * Math.PI);
 ctx.fill();
}
function line(x1, y1, x2, y2) {
 ctx.beginPath();
 ctx.lineWidth = 3;
 ctx.strokeStyle = "red";
 ctx.moveTo(x1, y1);
 ctx.lineTo(x2, y2);
 ctx.closePath(); ctx.stroke();
}
canvas.addEventListener('click', function (e) {
if(flag){
    ctx.lineWidth = '3';
    if (counter == 0) {
        ctx.beginPath();
        counter++;
        x[0][0] = e.clientX;
        x[0][1] = e.clientY;
        point(x[0][0], x[0][1]);
    }else{
        x[counter][0] = e.clientX;
        x[counter][1] = e.clientY;
        point(x[counter][0], x[counter][1]);
        line(x[counter - 1][0], x[counter - 1][1], x[counter][0], x[counter][1]);
        counter++;
        flag = false;
    }
}
});
2
  • 1
    Приложите, пожалуйста, к вопросу минимально воспроизводимый код. Так отвечающим будет легче понять как вы это делаете и как можно реализовать вашу задумку
    – DGDays
    27 дек 2020 в 10:13
  • добавил код с помощью которого я рисую точки и прямую
    – Badbrain
    27 дек 2020 в 10:25

1 ответ 1

1

алгоритм такой

  1. по 2 точкам вычисляете параметры прямой (y = ax + b, т.е. а и b)
  2. используя коэффициенты вычисляем 2 новых точки -

2.1) или на далеких -x и x, чтобы прямая гарантированно вписалась в прямоугольную область

2.2) или точно на границах прямоугольной области вычисляем новые точки

при таком подходе отдельно стоит рассмотреть случай, когда прямая является вертикальной, но для него все тоже самое - провести прямую через 2 точки на горизонтальных границах прямоугольника

3
  • y = ax + b - с вертикальной линией будут проблемы
    – Grundy
    27 дек 2020 в 11:04
  • @Grundy♦ не спорю, но этот частный случай можно рассмотреть отдельно
    – Zhihar
    27 дек 2020 в 11:11
  • Стоит добавить про это в ответ
    – Grundy
    27 дек 2020 в 11:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.