Phương thức closePath

Phương thức closePath tự động đóng hình dạng được vẽ bằng phương thức lineTo, bằng cách vẽ một đường thẳng từ điểm cuối về điểm đầu. Nếu hình dạng đã được đóng hoặc chỉ là một điểm, phương thức này không làm gì cả.

Cú pháp

ngữ cảnh.closePath();

Ví dụ

Đầu tiên, hãy vẽ hai đường, không đóng chúng bằng closePath:

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

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

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

Ví dụ

Bây giờ hãy đóng hai đường này thành một hình bằng closePath, để có được một hình tam giác:

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

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

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.closePath(); // đóng các đường thành hình dạng
ctx.stroke();

Ví dụ

Hãy vẽ một hình vuông, thay vì đường cuối cùng thì đóng hình bằng closePath:

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

let 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.closePath(); // đóng các đường thành hình dạng
ctx.stroke();

Xem thêm

phương thức fill,
dùng để tô màu hình dạng với một màu xác định