Phương thức stroke

Phương thức stroke được gọi để hoàn thành việc vẽ đường thẳng với lineTo, cũng như để vẽ đường viền cho các hình dạng được vẽ, ví dụ, thông qua phương thức rect.

Cú pháp

ngữ cảnh.stroke()

Ví dụ

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

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

Ví dụ

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

<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();
ctx.stroke();

Xem thêm

phương thức fill,
được sử dụng để tô màu nền cho một hình dạng
thuộc tính strokeStyle,
thiết lập màu sắc cho đường thẳng