Để tô màu gradient dạng linear (sọc) với HTML5 Canvas chúng ta có thể dùng phương thức createLinearGradient(). Để chèn hình vào phương thức này chúng ta sử dụng thuộc tính addColorStop.

Cú pháp:

1
2

var grd=context.createLinearGradient(startX, startY, endX, endY);
grd.addColorStop(offset, color);
 
startX: tọa độ x của điểm bắt đầu
startY: tọa độ y của điểm bắt đầu
endX: tọa độ x của điểm kết thúc
endY: tọa độ y của điểm kết thúc
 

Ví dụ minh họa:

Javascript:
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    context.beginPath(); // bắt đầu vẽ hình
    context.moveTo(170, 80);
    context.bezierCurveTo(130, 100, 130, 150, 230, 150);
    context.bezierCurveTo(250, 180, 320, 180, 340, 150);
    context.bezierCurveTo(420, 150, 420, 120, 390, 100);
    context.bezierCurveTo(430, 40, 370, 30, 340, 50);
    context.bezierCurveTo(320, 5, 250, 20, 250, 50);
    context.bezierCurveTo(200, 5, 150, 20, 170, 80);
    context.closePath(); // xong phần vẽ hình
 
    // add linear gradient
    var grd = context.createLinearGradient(230, 0, 370, 200);
    grd.addColorStop(0, "#8ED6FF"); // xanh sáng
    grd.addColorStop(1, "#004CB3"); // xanh tối
    context.fillStyle = grd;
    context.fill();
 
    // vẽ viền
    context.lineWidth = 5;
    context.strokeStyle = "#0000ff";
    context.stroke();
};

Giải thích:

Hướng của gradient linear di chuyển từ điểm bắt đầu tới điểm kết thúc. Trong ví dụ sử dụng hai màu: xanh sáng cho điểm bắt đầu và xanh tối dần tới điểm kết thúc. Bạn hãy thử tô màu vài hình và thay đồi màu với vị trí của hai điểm xem nhé.

Nếu bạn muốn gradient nhiều hơn hai màu thì bạn có thể thêm các màu ở giữa offset lớn hơn 0 và nhỏ hơn 1 nhé. Ví dụ: nếu bạn muốn vẽ hình trên nhấn thêm màu vàng ở khoảng giữa thì gọi grd.addColorStop(0.5, "yellow");

Kết quả: