HTML5: Vẽ chữ bằng <canvas>

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Để vẽ chữ bằng <canvas> bạn nên dùng các thuộc tính và phương thức sau đây:

Ø  Thuộc tính font dùng để định nghĩa phông chữ cho văn bản

Ø  Phương thức fillText(text,x,y) dùng để vẽ chữ với nét chữ là nét đặc

Ø  Phương thức strokeText(text,x,y) cũng dùng để vẽ chữ với nét chữ là nét rỗng.

Ví dụ 1: Dùng phương thức fillText() để vẽ chữ (tạo chữ nét đặc):

<!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 c=document.getElementById("myCanvas");

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

ctx.font="30px Arial";

ctx.fillText("V1Study",50,60);

</script>

</body>

</html>

 

Ví dụ 2: Dùng phương thức strokeText() để vẽ chữ (tạo chữ nét rỗ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 c=document.getElementById("myCanvas");

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

ctx.font="30px Arial";

ctx.strokeText("V1Study",50,60);

</script>

</body>

</html>

 

» Tiếp: Vẽ ảnh trên <canvas>
« Trước: Vẽ hình tròn trên <canvas>
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!