Thuộc tính kiểu nét vẽ của canvas
Ví dụ
Vẽ hình chữ nhật với StrokeStyle ="red":
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "red";
ctx.strokeRect(20, 20, 150, 100); Hãy tự mình thử »Thêm ví dụ dưới đây.
Sự miêu tả
Thuộc tính strokeStyle đặt hoặc trả về màu, độ chuyển màu hoặc mẫu được sử dụng cho các nét.
Giá trị mặc định là #000000 (màu đen đặc).
Xem thêm:
Thuộc tính fillStyle (Đặt màu/kiểu tô màu)
Thuộc tính lineWidth (Đặt độ rộng của dòng)
Phương thức BeginPath() (Bắt đầu một đường dẫn mới)
Phương thức moveTo() (Di chuyển đường dẫn đến một điểm)
Phương thức lineTo() (Thêm một dòng vào đường dẫn)
Phương thức Stroke() (Vẽ đường dẫn hiện tại)
Phương thức StrokeRect() (Vẽ hình chữ nhật)
Cú pháp
| bối cảnh .đột quỵStyle = màu | độ dốc | mẫu |
Giá trị tài sản
| Value | Description | Play it |
|---|---|---|
| color | A CSS color value that indicates the stroke color of the drawing. Default value is #000000 | Play it » |
| gradient | A gradient object ( linear or radial ) used to create a gradient stroke | |
| pattern | A pattern object used to create a pattern stroke |
Thêm ví dụ
Ví dụ
Vẽ một hình chữ nhật có độ dốc stokeStyle :
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Create gradient
const 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); Hãy tự mình thử »Ví dụ
Viết dòng chữ "Cười thật tươi!" với độ dốc đột quỵStyle :
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Verdana";
// Create gradient
const gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.strokeStyle = gradient;
ctx.strokeText("Big smile!", 10, 50); Hãy tự mình thử »Hỗ trợ trình duyệt
Phần tử <canvas> là tiêu chuẩn HTML5 (2014).
stokestyle được hỗ trợ trong tất cả các trình duyệt hiện đại:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |
❮ Tham khảo Canvas
