Phương thức canvas createLinearGradient()
Ví dụ
Xác định một gradient (trái sang phải) chuyển từ đen sang trắng, làm kiểu tô màu cho hình chữ nhật:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Create a Gradient
const grd = ctx.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, "black");
grd.addColorStop(1, "white");
// Draw a filled Rectangle
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 150, 100);
Hãy tự mình thử »Sự miêu tả
Phương thức createLinearGradient()
tạo một đối tượng gradient tuyến tính.
Đối tượng gradient có thể được sử dụng để tô màu hình chữ nhật, hình tròn, đường thẳng, văn bản, v.v.
Đối tượng gradient có thể được sử dụng làm giá trị cho thuộc tính StrokeStyle hoặc fillStyle .
Ghi chú
Bạn phải thêm điểm dừng màu vào đối tượng chuyển màu để làm cho chuyển màu hiển thị.
Xem thêm:
Phương thức createRadialGradient() (Tạo đối tượng chuyển màu)
Phương thức addColorStop() (Thêm điểm dừng chuyển màu)
Thuộc tính fillStyle (Đặt màu/kiểu tô màu)
Thuộc tính StrokeStyle (Đặt màu/kiểu nét)
Cú pháp
bối cảnh .createLinearGradient( x0, y0, x1, y1 ) |
Giá trị tham số
Param | Description | Play it |
---|---|---|
x0 | The x-coordinate of the start point of the gradient | Play it » |
y0 | The y-coordinate of the start point of the gradient | |
x1 | The x-coordinate of the end point of the gradient | |
y1 | The y-coordinate of the end point of the gradient |
Giá trị trả về
Kiểu | Sự miêu tả |
---|---|
Sự vật | Đối tượng gradient tuyến tính |
Thêm ví dụ
Ví dụ
Xác định một gradient (từ trên xuống dưới) làm kiểu tô cho hình chữ nhật:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Create Gradient
const my_gradient = ctx.createLinearGradient(0, 0, 0, 170);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
// Fill Rectangle
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);
Hãy tự mình thử »Ví dụ
Xác định một gradient chuyển từ đen, sang đỏ, sang trắng, làm kiểu tô cho hình chữ nhật:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Create Gradient
const my_gradient = ctx.createLinearGradient(0, 0, 170, 0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(0.5, "red");
my_gradient.addColorStop(1, "white");
// Fill Rectangle
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);
Hãy tự mình thử »Hỗ trợ trình duyệt
Phần tử <canvas>
là tiêu chuẩn HTML5 (2014).
createLinearGradient()
đượ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