Canvas là một công cụ mạnh mẽ của HTML5, giúp bạn tạo ra đồ họa trực tiếp trên trang web bằng JavaScript. Đây là lựa chọn phổ biến để vẽ hình ảnh, đồ thị, và thậm chí là trò chơi đơn giản. Bài viết này sẽ hướng dẫn cách sử dụng Canvas cho người mới bắt đầu.
hẻ <canvas> tạo ra một không gian trống, cho phép bạn sử dụng JavaScript để vẽ các yếu tố đồ họa như hình học, biểu đồ, hoặc ảnh động.
<canvas id="myCanvas" width="500" height="500"></canvas>
id: Định danh cho thẻ Canvas.widthvàheight: Kích thước không gian, tính bằng pixel.
Thiết Lập Canvas trong JavaScript
Sử dụng JavaScript để lấy đối tượng canvas và ngữ cảnh vẽ:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
Phương thức getContext("2d") cho phép bạn sử dụng các lệnh vẽ 2D.
Các Phương Thức Vẽ Hình Cơ Bản
Vẽ Hình Chữ Nhật
-
fillRect(x, y, width, height): Vẽ hình chữ nhật đặc. strokeRect(x, y, width, height): Vẽ hình chữ nhật không tô màu.
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 50); // Hình chữ nhật màu xanh dương
ctx.strokeStyle = "red";
ctx.strokeRect(130, 10, 100, 50); // Hình chữ nhật đường viền đỏ
Vẽ Đường Thẳng
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
Vẽ Hình Tròn
arc(x, y, radius, startAngle, endAngle, anticlockwise): Vẽ cung tròn.
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2);
ctx.fill();
Thiết Lập Màu Sắc và Độ Trong Suốt
Bạn có thể thay đổi màu sắc bằng fillStyle và strokeStyle, đồng thời điều chỉnh độ trong suốt với globalAlpha.
ctx.fillStyle = "rgba(0, 128, 128, 0.5)"; // Màu xanh lục với độ trong suốt 50%
ctx.fillRect(200, 100, 100, 100);
Ứng Dụng Thực Tế của Canvas
Canvas hữu ích cho việc:
- Vẽ đồ thị dữ liệu
- Tạo hình ảnh động cơ bản
- Thiết kế trò chơi trực tuyến
- Tạo các hiệu ứng đồ họa trên trang web
Với những kiến thức cơ bản này, bạn đã có thể bắt đầu tạo các hình ảnh và đồ họa trên trang web của mình bằng Canvas!
By
By
