Dần đều HTML Canvas
- Trang trước Đường cong Canvas
- Trang sau Text Canvas
Canvas - Màu đậm
Màu đậm có thể được sử dụng để lấp đầy hình vuông, hình tròn, đường, văn bản, v.v. Hình dạng trên canvas không giới hạn ở màu đơn.
Có hai loại màu đậm khác nhau:
- createLinearGradient(x,y,x1,y1) - Tạo màu đậm tuyến tính
- createRadialGradient(x,y,r,x1,y1,r1) - Tạo màu đậm trục từ/đường tròn
Một khi chúng ta có đối tượng màu đậm, chúng ta phải thêm hai hoặc nhiều điểm色.
Phương thức addColorStop() xác định điểm dừng màu và vị trí theo màu đậm. Vị trí màu đậm có thể là bất kỳ giá trị từ 0 đến 1.
Để sử dụng màu đậm, hãy đặt thuộc tính fillStyle hoặc strokeStyle thành màu đậm, sau đó vẽ hình dạng (hình vuông, văn bản hoặc đường).
Canvas - Màu đậmSử dụng createLinearGradient()
Mẫu
Tạo màu đậm tuyến tính. Sử dụng màu đậm để lấp đầy hình vuông:
JavaScript:
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Tạo màu đậm
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Dùng màu đậm để lấp đầy
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
Sử dụng createRadialGradient():
Mẫu
Tạo màu đậm trục từ/đường tròn. Sử dụng màu đậm để lấp đầy hình vuông:
JavaScript:
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Tạo màu đậm
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Dùng màu đậm để lấp đầy
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
Xin xem thêm:
- Trang trước Đường cong Canvas
- Trang sau Text Canvas
