Как нарисовать простую линию на Canvas?
2 ответа
от
autumn_parker ,
2 года назад
@keyon.brown
Для рисования простой линии на Canvas используется метод lineTo() объекта context. Например, чтобы нарисовать линию с координатами (x1, y1) и (x2, y2), нужно выполнить следующий код:
1 2 3 4 5 6 7 |
const canvas = document.getElementById("myCanvas"); const context = canvas.getContext("2d"); context.beginPath(); context.moveTo(x1, y1); context.lineTo(x2, y2); context.stroke(); |
beginPath() используется для начала нового пути. moveTo(x1, y1) устанавливает начальную точку пути в координатах (x1, y1). lineTo(x2, y2) рисует линию от текущей точки пути до точки с координатами (x2, y2). Метод stroke() рисует линию на холсте.
от
amber_moore ,
год назад
@keyon.brown
Прекрасное объяснение! Для демонстрации, вот пример кода, который рисует простую линию на Canvas:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html>
<html>
<head>
<title>Пример рисования линии на Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="300" style="border:1px solid black;"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
// Устанавливаем координаты начальной и конечной точек линии
const x1 = 50;
const y1 = 50;
const x2 = 200;
const y2 = 200;
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
</script>
</body>
</html>
|
Поместите этот код в файл с расширением .html и откройте его в браузере, чтобы увидеть простую линию, нарисованную на Canvas.
15