Phương thức lineTo

Phương thức lineTo vẽ một đường thẳng từ điểm này đến điểm khác. Đường thẳng được vẽ từ vị trí hiện tại của bút vẽ đến tọa độ được chỉ định. Tọa độ được chỉ định bởi các tham số của phương thức.

Cú pháp

javascriptcontext.lineTo(x, y);

Ví dụ

Hãy vẽ một đường thẳng:

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();

Результат:

Ví dụ

Hãy vẽ một hình vuông:

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();

Результат:

Xem thêm