CanvasGradient: phương thức addColorStop()

Cú pháp

addColorStop(offset, color)

Tham số

offset

Một số từ 0 đến 1, bao gồm cả hai đầu, biểu thị vị trí của điểm dừng màu. 0 là đầu bắt đầu của gradient và 1 là đầu kết thúc.

color

Một giá trị CSS <color> biểu thị màu của điểm dừng.

Giá trị trả về

Không có (undefined).

Ngoại lệ

IndexSizeError DOMException

Ném ra nếu offset không nằm giữa 0 và 1, bao gồm cả hai đầu.

SyntaxError DOMException

Ném ra nếu color không thể được phân tích cú pháp thành giá trị CSS <color>.

Ví dụ

Thêm các điểm dừng vào dải màu chuyển sắc

Ví dụ này dùng phương thức addColorStop để thêm các điểm dừng vào một đối tượng CanvasGradient tuyến tính. Sau đó dải màu chuyển sắc được dùng để tô một hình chữ nhật.

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "green");
gradient.addColorStop(0.7, "white");
gradient.addColorStop(1, "pink");
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);

Kết quả

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Giao diện định nghĩa phương thức này: CanvasGradient
• CanvasRenderingContext2D.createLinearGradient()
• CanvasRenderingContext2D.createRadialGradient()