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

javascriptngữ cảnh.closePath();

Ví dụ

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

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(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:

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(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:

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

Результат:

Xem thêm