19/09/2018, 14:55
strokeStyle trong canvas
Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 < ! DOCTYPE html > < html > < body > < canvas id = ...
Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.
Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" awidth="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> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.strokeStyle = "#FF0000"; ctx.strokeRect(20, 20, 150, 100); </script> </body> </html> |
Demo
Trình duyệt hỗ trợ
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 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| strokeStyle | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 |
Định nghĩa và cách sử dụng
Thuộc tính strokeStyle dùng để thiết lập hoặc trả về màu sắc, dải màu hoặc mẫu họa tiết sử dụng cho đường viền.
Giá trị mặc định: #000000
Cú pháp JavaScript: context.strokeStyle=color|gradient|pattern;
Giá trị thuộc tính
| Giá trị | Miêu tả |
|---|---|
| color | Giá trị màu của viền. Giá trị mặc định là #000000 (màu đen) |
| gradient | Dải màu (dạng thẳng hoặc dạng tròn) sử dụng để tạo dải màu cho viền |
| pattern | Mẫu họa tiết sử dụng để tạo họa tiết cho viền |
Ví dụ
Tạo đường viền hình chữ nhật bằng dải màu
Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" awidth="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> <script> 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"); // Fill with gradient ctx.strokeStyle = gradient; ctx.lineWidth = 5; ctx.strokeRect(20, 20, 150, 100); </script> </body> </html> |
Demo
Tạo dải màu cho đường viền chữ
Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" awidth="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> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Verdana"; // Create gradient var gradient = ctx.createLinearGradient(0, 0, c.awidth, 0); gradient.addColorStop("0", "magenta"); gradient.addColorStop("0.5", "blue"); gradient.addColorStop("1.0", "red"); // Fill with gradient ctx.strokeStyle = gradient; ctx.strokeText("WebVN.com", 10, 50); </script> </body> </html> |
Demo
