Добрый день
Мне нужно нарисовать несколько линий от точке к точке. Казалось бы код простой. Что может пойти не так?... Линия рисуется непойми где и непойми как. Чтобы получить линию нужно потыкать в рандомные места в коде ниже. Как нарисовать нормальную тонкую линию между двумя "кликами" по канвасу?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Draw lines</title>
<style lang="css">
html, body {
margin: 0;
padding: 0;
}
#id_canvas {
width: 1556px;
height: 1032px;
background-image: url('https://i.ibb.co/5Kp3J85/2023-08-16-08-03-10.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
</style>
</head>
<body>
<!-- Канвас для рисования -->
<canvas id="id_canvas"></canvas>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script>
$('document').ready(function() {
let poitns = []; // Массив с кликами
const $canvas = $('#id_canvas')[0];
const context = $canvas.getContext('2d');
context.strokeStyle = 'red';
context.lineWidth = 1;
const rect = $canvas.getBoundingClientRect();
$($canvas).bind('click', function (e) {
// Получаем координаты клика
const x = Math.round(e.clientX - rect.left);
const y = Math.round(e.clientY - rect.top);
// Мне нужно нарисовать несколько линий от точке к точке.
// Казалось бы код простой. Что может пойти не так?...
// Линия рисуется непойми где и непойми как. Чтобы получить линию нужно потыкать в рандомные места
// Как нарисовать нормальную тонкую линию между двумя "кликами" по канвасу?
if (poitns.length >= 1) {
// Рисуем линию
context.beginPath();
context.moveTo(x, y);
context.lineTo(poitns.at(-1)[0], poitns.at(-1)[1]);
context.stroke();
console.log('Draw line from ', x, y, ' to ', poitns.at(-1)[0], poitns.at(-1)[1]);
}
else {
console.log('First click at ', x, y);
}
poitns.push([x, y]); // Кладем наш клик в массив
});
});
</script>
</body>
</html>
