Bài 4 - Tạo dải màu biến thiên với HTML Canvas Gradients

Canvas - Gradients

Gradients có thể được sử dụng để vẽ trong hình nhữ nhật, hình tròn, đường thẳng, văn bản, vv... Hình dáng trên Canvas không bị giới hạn bởi màu sắc cứng nhắc.

Có 2 loại khác nhau của Gradients:
  • createLinearGradient(x,y,x1,y1) ✓ tạo một dải màu tuyến tính
  • createRadialGradient(x,y,r,x1,y1,r1) ✓ tạo một tâm tròn màu biến thiên

Một 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() xác định những điểm dừng màu, và nó là vị trí dọc theo gradient. Những vị trí gradient có thể ở bất cứ nơi nào giữa 0 và 1.

Để sử dụng gradient, thiết lập thuộc tính fillStype hoặc strokeStyle tới gradient, rồi vẽ ra hình dạng (hình chữ nhật, văn bản, hoặc một đường).

Sử dụng createLinearGradient()

Ví dụ

Tạo một dải màu tuyến tính. Hình chữ nhật với biến thiên 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);
Xem demo »

Sử dụng createRadialGradient():

Ví dụ

Tạo một tâm tròn màu biến thiên trong một hình chữ nhật:


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);
Xem demo »
⚽ Giải thích ví dụ trên:
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
✓ Vòng tròn thứ nhất có tâm ở vị trí x,y là 75,50 và có bán kính là 5 ✓ Vòng tròn thứ hai có tâm ở vị trí x,y là 90,60 và có bán kính là 100

 grd.addColorStop(0,"red"); ✓ Biến thiên màu từ đỏ
grd.addColorStop(1,"white"); ✓ Tới trắng
ctx.fillStyle = grd; ctx.fillRect(10,10,150,80); ✓ Đưa vòng tròn màu biến thiên vào trong hình chữ nhật, Hình chữ nhật được vẽ bắt đầu ở tọa độ x,y là 10,10 và chiều rộng/cao hình nhữ nhật lần lượt là 150,80

Trương Đức Tài.