HTML5: Gradient với <canvas>
Giải phóng thời gian, khai phóng năng lực
Gradient có thể được dùng để tô màu cho các dạng hình học như hình chữ nhật, hình tròn, đường thẳng, văn bản, …
Để sử dụng gradient trong <canvas> bạn có thể thực hiện theo các bước sau đây:
Bước 1: Chọn loại gradient. Có hai loại gradient khác nhau dùng trong tô màu được thể hiện qua hai phương thức sau đây:
Ø Phương thức createLinearGradient(x,y,x1,y1) dùng để tạo gradient dạng thẳng
Ø Phương thức createRadialGradient(x,y,r,x1,y1,r1) dùng để tạo gradient dạng cong.
Bước 2: Xác định các điểm dừng màu sắc. Để xác định các điểm dừng màu sắc của gradient ta cần sử dụng phương thức addColorStop(). Các điểm dừng màu sắc của gradient nằm trong đoạn [0-1].
Bước 3: Sử dụng thuộc tính fillStyle hoặc strokeStyle để yêu cầu gradient tương ứng, rồi sau đó vẽ các hình dạng mong muốn.
Ví dụ 1: Sử dụng phương thức createLinearGradient() để vẽ gradient dạng thẳng.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Trình duyệt này không hỗ trợ phần tử canvas.
</canvas>
<script>
var i=0;
function draw4(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Tạo gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Vẽ hình
if(i<150)
i++;
else
return;
ctx.fillStyle=grd;
ctx.fillRect(25,13,i,i/2);
setTimeout("draw4();",30);
}
draw4();
</script>
</body>
</html>
Ví dụ 2: Sử dụng phương thức createRadialGradient() để vẽ gradient dạng tròn/elip.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Trình duyệt này không hỗ trợ phần tử canvas.
</canvas>
<script>
var i=0;
function draw5(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Tạo gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Vẽ hình
if(i<150)
i++;
else
return;
ctx.fillStyle=grd;
ctx.fillRect(25,13,i,i/2);
setTimeout("draw5();",30);
}
draw5();
</script>
</body>
</html>
Giải phóng thời gian, khai phóng năng lực