Ví dụ và cách sử dụng phương thức strokeRect() để vẽ một hình chữ nhật (không đổ màu).

strokeRect() trong Canvas

Vẽ hình chữ nhật kích thước 50*100

Code:

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.strokeRect(20, 20, 150, 100);

</script>

</body>

</html>

Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thuộc tính.

Thuộc tính
strokeRect()	4.0	2.0	9.0	3.1	9.0

Phương thức strokeRect() dùng để vẽ một hình chữ nhật (không đổ màu). Mặc định viền sẽ là màu đen.

Mẹo: Sử dụng thuộc tính strokeStyle để thiết lập màu, dải màu hoặc mẫu họa tiết cho đường viền.

Cú pháp JavaScript: context.strokeRect(x,y,width,height);

Tham số	Miêu tả
x	Tọa độ X của góc trái phía trên của hình chữ nhật
y	Tọa độ Y của góc trái phía trên của hình chữ nhật
width	Chiều dài của hình chữ nhật, tính bằng pixels
height	Chiều cao của hình chữ nhật, tính bằng pixels

WebVN Cộng đồng web Việt Nam