Метод lineTo

Методът lineTo рисува линия от точка до точка. Линията се рисува от текущата позиция на химикала за рисуване до указаните координати. Координатите се задават като параметри на метода.

Синтаксис

javascriptконтекст.lineTo(x, y);

Пример

Нека нарисуваме линия:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();

Результат:

Пример

Нека нарисуваме квадрат:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.lineTo(50, 50);
ctx.stroke();

Результат:

Вижте също