Canvas: Dải màu gradient - Day 3

Có 2 loại dải màu: Linear gradient, Radial gradient, và Conic gradient

Linear gradient

Linear-gradient (gradient tuyến tính) là loại gradient phổ biến nhất mà chúng ta thấy trong thiết kế web. Nó được gọi là "tuyến tính" vì flow của màu sắc sẽ từ trái sang phải, từ trên xuống dưới hoặc ở bất kỳ góc nào tùy thuộc vào hướng mà mình chọn.

Có 3 kiểu cơ bản: horizontal (ngang), vertical (dọc), và diagonal (đường chéo)

Cú pháp

context.createLinearGradient(x0,y0,x1,y1);

Giải thích

• x0: Tọa độ X của điểm bắt đầu dải màu
• y0: Tọa độ Y của điểm bắt đầu dải màu
• x1: Tọa độ X của điểm kết thúc dải màu
• y1: Tọa độ Y của điểm kết thúc dải màu

Định nghĩa dải màu:

• Horizontal: (0, 0, x1,0)
• Vertical: (0, 0, 0, y1)
• Diagonal (0, 0, x1, y1)

Ví dụ: Tạo dải màu theo đường chéo từ góc trên bên trái xuống góc dưới bên phải

// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 200);
grd.addColorStop(0, "red");
grd.addColorStop(0.3, "yellow");
grd.addColorStop(0.6, "green");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Radial Gradient

Radial gradient (gradient xuyên tâm) khác với linear gradient ở chỗ nó bắt đầu tại một điểm duy nhất và phát rộng ra bên ngoài. Các lớp thường được sử dụng để mô phỏng một nguồn sáng. Điều đó làm cho chúng hữu ích để làm cho sự chuyển giao giữa các màu được tự nhiên hơn.

Mặc định màu đầu tiên bắt đầu ở vị trí trung tâm của phần tử và sau đó mờ dần sang màu kết thúc về hướng về phía rìa của phần tử. Sự mờ dần xảy ra ở một tỷ lệ bằng nhau bất kể phương hướng. 

Cú pháp:

createRadialGradient(x0, y0, r0, x1, y1, r1)

Phương thức này trả về một đối tượng CanvasGradient biểu diễn một radial gradient mà tô màu cone đã cho bởi các đường tròn được biểu diễn bởi các tham số. 

3 tham số đầu tiên định nghĩa một đường tròn với tọa độ tâm (x1,y1) và bán kính r1; và tham số thứ hai là vòng tròn với tọa độ tâm (x2,y2) và bán kính r2.

Ví dụ:

Conic

Gradient conic là một gradient với các chuyển đổi màu được quay xung quanh một điểm trung tâm.

Để tạo một gradient conic, bạn phải xác định ít nhất hai màu.

Tham khảo

https://viblo.asia/p/css-gradients-Qbq5Q32RZD8

https://www.geeksforgeeks.org/html-canvas-createlineargradient-method/