Thuộc tính strokeStyle của Canvas
Định nghĩa và cách sử dụng
strokeStyle Thuộc tính thiết lập hoặc trả về màu, dải màu hoặc mẫu cho nét bút.
Ví dụ
Ví dụ 1
Vẽ một hình vuông. Hãy sử dụng màu nét bút màu xanh:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#0000ff";
ctx.strokeRect(20,20,150,100);
Cú pháp
context.strokeStyle=color|gradient|pattern;
Giá trị thuộc tính
| Giá trị | Mô tả |
|---|---|
| color | Chỉ ra màu nét vẽ vẽ Giá trị màu CSS）。Giá trị mặc định là #000000。 |
| gradient | Đối tượng dải màu được sử dụng để lấp đầy vẽ (thẳnghoặcRất）。 |
| pattern | Đối tượng pattern được sử dụng để tạo nét bút pattern. |
Chi tiết kỹ thuật
| Giá trị mặc định: | #000000 |
|---|
Các ví dụ khác
Ví dụ 2
Vẽ một hình vuông. Sử dụng nét bút dải màu:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Điền với dải màu
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
Ví dụ 3
Viết văn bản "codew3c.com" với nét bút dải màu:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// Tạo dải màu
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Điền với dải màu
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);
Hỗ trợ trình duyệt
Số liệu trong bảng chỉ ra phiên bản trình duyệt đầu tiên hoàn toàn hỗ trợ thuộc tính này.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Ghi chú:Trình duyệt Internet Explorer 8 và các phiên bản sớm hơn không hỗ trợ yếu tố <canvas>.
