HTML Canvas Gradients
Canvas - Gradients
Gradients có thể được sử dụng để tô các hình chữ nhật, hình tròn, đường thẳng, văn bản, v.v. Các hình dạng trên canvas không giới hạn ở các màu đồng nhất.
Có hai loại gradient khác nhau:
- createLinearGradient ( x, y, x1, y1 ) - tạo ra một gradient tuyến tính
- createRadialGradient ( x, y, r, x1, y1, r1 ) - tạo ra một gradient xuyên tâm / tròn
Khi chúng ta có một đối tượng gradient, chúng ta phải thêm hai hoặc nhiều điểm dừng màu.
Phương thức addColorStop () chỉ định các điểm dừng màu và vị trí của nó dọc theo gradient. Vị trí gradient có thể nằm trong khoảng từ 0 đến 1.
Để sử dụng gradient, hãy đặt thuộc tính fillStyle hoặc strokeStyle thành gradient, sau đó vẽ hình dạng (hình chữ nhật, văn bản hoặc đường thẳng).
Sử dụng createLinearGradient ()
Thí dụ
Tạo một gradient tuyến tính. Tô màu cho hình chữ nhật với gradient:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
Sử dụng createRadialGradient ():
Thí dụ
Tạo một gradient xuyên tâm / tròn. Tô màu cho hình chữ nhật với gradient:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);