Để tô màu gradient radial (màu gradient theo hình tròn) trong HTML5 Canvas chúng ta sử dụng phương thức createRadialGradient(). Radial gradients được định nghĩa bởi hai điểm bắt đầu và kết thúc (tương tự Gradient Linear).

 

Cú pháp:

1
2
3

var grd=context.createRadialGradient(startX, startY, startRadius, 
	endX, endY, endRadius);
grd.addColorStop(offset, color);

Demo:

 
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(); // Hoàn tất hình
 
    // tô màu gradient radial     var grd = context.createRadialGradient(238, 50, 10, 238, 50, 200);
    grd.addColorStop(0, "#8ED6FF"); // Xanh sáng
    grd.addColorStop(1, "#004CB3"); // Xanh tối
    context.fillStyle = grd;
    context.fill();
 
    // vẽ đường viền
    context.lineWidth = 5;
    context.strokeStyle = "#0000ff";
    context.stroke();
};

HTML5 Canvas: Gradient Radial nhiều màu

 
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
27
28
29
30

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(); // Hoàn tất vẽ hình
 
    // vẽ gradient radial nhiều màu     var grd = context.createRadialGradient(238, 50, 10, 338, 50, 200);
    grd.addColorStop(0, "red");
    grd.addColorStop(0.17, "orange");
    grd.addColorStop(0.33, "yellow");
    grd.addColorStop(0.5, "green");
    grd.addColorStop(0.666, "blue");
    grd.addColorStop(1, "violet");
    context.fillStyle = grd;
    context.fill();
 
    // add stroke
    context.lineWidth = 5;
    context.strokeStyle = "#0000ff";
    context.stroke();
};

Giải thích:

Để tô màu Gradient Radial chúng ta định nghĩa điểm đầu tiên (tâm) và vị trí kết thúc của vòng tròn. Tô màu từ offset 0 tới 1. Nếu nhiều hơn nhiều màu thì chúng ta thêm offset ở khoảng 0 < offset < 1 như ví dụ trên.