HTML5: Gradient với <canvas>


Khóa học qua video:
Python C# Lập trình C Java SQL Server PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên

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>

 
» Tiếp: Cách sử dụng SVG
« Trước: Vẽ ảnh trên <canvas>
Khóa học qua video:
Python C# Lập trình C Java SQL Server PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên
Copied !!!