Thông qua bài, bạn sẽ biết định nghĩa canvas là gì? Các phương thức để vẽ hình lên canvas và ví dụ minh họa.

Canvas trong HTML5

Thẻ <canvas> được sử dụng để vẽ đồ họa trong HTML5.

Ảnh ở bên được tạo ra bởi thẻ <canvas>. Trong đó có 4 thành phần: hình chữ nhật đỏ, dải màu, hình chữ nhật nhiều màu và chữ nhiều màu.

Canvas là gì?

Thẻ <canvas> trong HTML5 được sử dụng để vẻ đồ họa một cách nhanh gọn thông qua một ngôn ngữ nào đó (thông thường là JavaScript).

Tuy nhiên, thẻ <canvas> bản thân nó không có khả năng tự vẽ mà nó chỉ là phần bao ngoài cho đồ họa – bạn cần phải sử dụng một ngôn ngữ để vẽ đồ họa bên trong.

Canvas sử dụng một số phương thức để vẽ: đường kẻ, hình hộp, hình tròn, chữ và chèn ảnh.

Trình duyệt hỗ trợ

Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thẻ <canvas>:

Thuộc tính
Canvas	4.0	2.0	9.0	3.1	9.0

Ví dụ về canvas

Canvas là một khu vực hình chữ nhật trong trang. Mặc định, canvas không có đường viền và không có nội dung.

Khởi tạo canvas:

1	<canvas id="myCanvas" width="200" height="100"></canvas>

Lưu ý: Luôn sử dụng thuộc tính id (để sử dụng trong JavaScript) và quy định kích thước cho canvas.

Để thêm đường viền, bạn sử dụng thuộc tính style:

<!DOCTYPE html>

<html>

<body>

Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.

</canvas>

</body>

</html>

Demo

Vẽ hình chữ nhật

<!DOCTYPE html>

<html>

<body>

Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.

</canvas>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.fillStyle = "#FF0000";

ctx.fillRect(0,0,150,75);

</script>

</body>

</html>

Demo

Vẽ đường thẳng

<!DOCTYPE html>

<html>

<body>

Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.

</canvas>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

</script>

</body>

</html>

Demo

Vẽ hình tròn

<!DOCTYPE html>

<html>

<body>

Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.

</canvas>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();

</script>

</body>

</html>

Demo

Viết chữ

<!DOCTYPE html>

<html>

<body>

Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.

</canvas>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.font = "30px Arial";

ctx.fillText("Canvas",10,50);

</script>

</body>

</html>

Demo

Viết chữ có viền

<!DOCTYPE html>

<html>

<body>

Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.font = "30px Arial";

ctx.strokeText("Canvas",10,50);

</script>

</body>

</html>

Demo

Tạo dải màu thẳng với 2 màu đỏ trắng

<!DOCTYPE html>

<html>

<body>

Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

// Tạo dải màu thẳng

var grd = ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Đổ dải màu vào hình chữ nhật

ctx.fillStyle = grd;

ctx.fillRect(10,10,150,80);

</script>

</body>

</html>

Demo

Tạo dải màu tròn với 2 màu đỏ trắng

<!DOCTYPE html>

<html>

<body>

Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

// Tạo dải màu tròn

var grd = ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Đổ dài màu vào hình

ctx.fillStyle = grd;

ctx.fillRect(10,10,150,80);

</script>

</body>

</html>

Demo

Chèn ảnh vào canvas

<!DOCTYPE html>

<html>

<body>

<p>Khung canvas để chèn ảnh:</p>

<canvas id="myCanvas" width="250" height="300"

style="border:1px solid #d3d3d3;">

Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas>

<p><button onclick="myCanvas()">Chèn ảnh vào canvas!</button></p>

function myCanvas() {

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var img = document.getElementById("scream");

ctx.drawImage(img,10,10);

}

</script>

</body>

</html>

Demo

« Bài Trước Bài Tiếp »

WebVN Cộng đồng web Việt Nam

Canvas trong HTML5

Canvas là gì?

Trình duyệt hỗ trợ

Ví dụ về canvas

Leave a Reply Cancel reply