Logo

Hướng Dẫn Sử Dụng Thẻ Canvas Trong HTML Và JavaScript

Kiến thức Frontend

Hướng Dẫn Sử Dụng Thẻ Canvas Trong HTML Và JavaScript

Tìm hiểu thẻ Canvas trong HTML và các phương thức JavaScript để vẽ hình, đường, văn bản và tạo hiệu ứng đồ họa trực tiếp trên web.

Giới thiệu thẻ <canvas>

Thẻ <canvas> là phần tử HTML cho phép vẽ đồ họa 2D hoặc 3D trực tiếp trên trình duyệt bằng JavaScript. Nó thường được dùng để tạo biểu đồ, game, animation hoặc các hiệu ứng hình ảnh.

Ví dụ cơ bản:

<canvas id="myCanvas" width="400" height="300"></canvas>

Lưu ý: Nếu không chỉ định width và height, canvas mặc định là 300px × 150px.

Thuộc tính chính của thẻ <canvas>

Thuộc tính Mô tả
width Chiều rộng canvas theo pixel
height Chiều cao canvas theo pixel

Bắt đầu vẽ với JavaScript

Để vẽ trên canvas, bạn cần lấy context 2D:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

Context là đối tượng cung cấp tất cả các phương thức và thuộc tính để vẽ hình, đường, văn bản và quản lý màu sắc.

Các phương thức và thuộc tính phổ biến

1. Vẽ hình chữ nhật

Phương thức Mô tả
fillRect(x, y, width, height) Vẽ hình chữ nhật được tô màu
strokeRect(x, y, width, height) Vẽ viền hình chữ nhật
clearRect(x, y, width, height) Xóa vùng hình chữ nhật

2. Đường kẻ (Paths)

Phương thức Mô tả
beginPath() Bắt đầu path mới
moveTo(x, y) Di chuyển bút vẽ đến vị trí (x, y)
lineTo(x, y) Vẽ đường từ vị trí hiện tại đến (x, y)
closePath() Đóng path hiện tại
stroke() Vẽ viền path
fill() Tô màu path

3. Vẽ hình tròn

Phương thức Mô tả
arc(x, y, radius, startAngle, endAngle) Vẽ cung tròn
arcTo(x1, y1, x2, y2, radius) Vẽ đường cong nối giữa 2 đoạn thẳng

4. Màu sắc và kiểu tô

Thuộc tính / Phương thức Mô tả
fillStyle Đặt màu tô
strokeStyle Đặt màu viền
lineWidth Độ dày đường viền
createLinearGradient() Tạo gradient tuyến tính
createRadialGradient() Tạo gradient hình tròn

5. Vẽ văn bản

Phương thức Mô tả
fillText(text, x, y) Vẽ văn bản được tô màu
strokeText(text, x, y) Vẽ văn bản viền
font Cài đặt font chữ
textAlign Căn chỉnh ngang văn bản
textBaseline Căn chỉnh dọc văn bản
measureText() Lấy chiều rộng văn bản

Ví dụ minh họa tổng hợp

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// Vẽ hình chữ nhật màu xanh
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 150, 100);

// Vẽ viền hình chữ nhật màu đỏ
ctx.strokeStyle = "red";
ctx.lineWidth = 5;
ctx.strokeRect(50, 50, 150, 100);

// Vẽ đường thẳng
ctx.beginPath();
ctx.moveTo(50, 200);
ctx.lineTo(200, 200);
ctx.stroke();

// Vẽ hình tròn
ctx.beginPath();
ctx.arc(300, 150, 50, 0, Math.PI * 2);
ctx.fillStyle = "green";
ctx.fill();

// Vẽ văn bản
ctx.font = "20px Arial";
ctx.fillStyle = "black";
ctx.fillText("Hello Canvas!", 250, 50);

Ứng dụng thực tiễn của <canvas>

Thẻ <canvas> không chỉ dùng để vẽ hình cơ bản mà còn có thể ứng dụng vào nhiều tình huống thực tiễn:

  1. Tạo biểu đồ và dashboard:
    Bạn có thể vẽ biểu đồ cột, biểu đồ tròn hoặc biểu đồ đường để hiển thị dữ liệu trực quan cho người dùng.

  2. Phát triển game 2D:
    Canvas cho phép vẽ đồ họa động, xử lý va chạm và quản lý animation, rất phù hợp với game web.

  3. Hiệu ứng hình ảnh và animation:
    Tạo các hiệu ứng hover, background động, gradient hoặc animation phức tạp mà không cần plugin bên ngoài.

  4. Vẽ hình học và hình vẽ tự do:
    Canvas thích hợp để tạo các ứng dụng vẽ trực tuyến, minh họa, hoặc công cụ thiết kế đồ họa cơ bản.

  5. Tương tác với người dùng:
    Canvas kết hợp với các sự kiện chuột hoặc cảm ứng giúp tạo trải nghiệm tương tác phong phú, ví dụ: vẽ theo di chuột, drag & drop, game click.

Tham khảo thêm:

Kết luận

Thẻ <canvas> kết hợp với JavaScript là công cụ mạnh mẽ để tạo đồ họa, biểu đồ, game và hiệu ứng trực quan trên web. Bằng cách nắm vững các phương thức, thuộc tính và kỹ thuật cơ bản, bạn có thể xây dựng các ứng dụng web sinh động, tương tác và thân thiện với người dùng

Phản hồi (0)
0