JavaScript - Canvas: Hướng dẫn cơ bản về Vẽ kỹ thuật số

Xin chào bạn, người học lập trình tiềm năng! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình thú vị vào thế giới JavaScript và Canvas. Là một ai đó đã dạy khoa học máy tính hơn một thập kỷ, tôi có thể告诉你 rằng Canvas là một trong những chủ đề thú vị và có phần thưởng nhất để học. Nó giống như có một sân chơi kỹ thuật số ngay trong trình duyệt web của bạn!

Canvas là gì?

Trước khi chúng ta nhảy vào mã, hãy hiểu Canvas là gì. Hãy tưởng tượng bạn có một tờ giấy trắng và một bộ bút màu. Đó chính là Canvas trong thế giới kỹ thuật số - một khu vực trống trên trang web của bạn nơi bạn có thể vẽ bất cứ thứ gì bạn muốn bằng JavaScript!

Canvas được giới thiệu cùng với HTML5 và từ đó trở thành một công cụ mạnh mẽ để tạo hình ảnh,动画, và thậm chí là trò chơi trực tiếp trong trình duyệt web. Nó giống như có một studio nghệ thuật nhỏ ngay trong trình soạn mã của bạn!

Làm việc với Canvas bằng JavaScript

Bây giờ, hãy撸 váy và bắt đầu vẽ! Thứ nhất, chúng ta cần thiết lập Canvas của mình trong HTML.

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

Điều này tạo ra một phần tử canvas rộng 400 pixel và cao 200 pixel. Hãy tưởng tượng nó như bảng vẽ kỹ thuật số của bạn.

Bắt đầu với Canvas

Để bắt đầu vẽ trên canvas, chúng ta cần lấy tham chiếu đến nó trong mã JavaScript và lấy ngữ cảnh vẽ của nó.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

Phương thức getContext('2d') cung cấp cho chúng ta một ngữ cảnh vẽ 2D - công cụ chúng ta sẽ sử dụng để vẽ trên canvas.

Vẽ hình dạng

Hãy bắt đầu với một điều gì đó đơn giản - vẽ một hình chữ nhật!

ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 75);

Mã này vẽ một hình chữ nhật xanh bắt đầu từ tọa độ (50, 50) với chiều rộng 100 pixel và chiều cao 75 pixel. Nó giống như nói với bút kỹ thuật số của bạn, "Hey, vẽ một hình chữ nhật xanh ở đây, và làm nó to như này!"

Vẽ đường

Bây giờ, hãy thử vẽ một đường:

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 100);
ctx.stroke();

Mã này bắt đầu một đường mới, di chuyển "bút" đến (50, 50), sau đó vẽ một đường đến (200, 100), và cuối cùng vẽ đường để làm cho nó可见. Nó giống như chơi nối điểm, nhưng với mã!

Vẽ hình tròn

Bao giờ chúng ta thử vẽ một khuôn mặt smiley? Thứ nhất, hãy vẽ một hình tròn cho khuôn mặt:

ctx.beginPath();
ctx.arc(200, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.stroke();

Điều này vẽ một hình tròn vàng với viền đen. Phương thức arc có thể trông một chút đáng sợ, nhưng hãy nghĩ của nó như nói với bút của bạn, "Vẽ một hình tròn centered at (200, 100), với bán kính 50, bắt đầu từ 0 và đi vòng quanh (đó là ý nghĩa của Math.PI * 2)."

Thêm văn bản

Hãy thêm một ít văn bản vào canvas của chúng ta:

ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello, Canvas!', 10, 30);

Điều này đặt phông chữ thành Arial 20 pixel, đặt màu sắc thành đen, và viết "Hello, Canvas!" bắt đầu từ vị trí (10, 30).

Ví dụ

Bây giờ chúng ta đã bao gồm các khái niệm cơ bản, hãy nhìn vào một số ví dụ thú vị để thấy Canvas có thể làm gì!

Ví dụ 1: Vẽ một ngôi nhà

// Thiết lập canvas
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Vẽ thân ngôi nhà
ctx.fillStyle = 'brown';
ctx.fillRect(100, 100, 150, 100);

// Vẽ mái nhà
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(175, 50);
ctx.lineTo(250, 100);
ctx.fillStyle = 'red';
ctx.fill();

// Vẽ cửa
ctx.fillStyle = 'blue';
ctx.fillRect(150, 150, 50, 50);

// Vẽ cửa sổ
ctx.fillStyle = 'yellow';
ctx.fillRect(200, 120, 30, 30);

Mã này vẽ một ngôi nhà đơn giản với thân nâu, mái đỏ, cửa xanh và cửa sổ vàng. Nó giống như xây dựng một ngôi nhà bằng mã thay vì Lego!

Ví dụ 2: Hình tròn di động

Hãy làm cho mọi thứ di chuyển! Đây là một animation đơn giản của một hình tròn nhảy:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

let x = 50;
let y = 50;
let dx = 2;
let dy = 2;
const radius = 20;

function drawCircle() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = 'green';
ctx.fill();

if (x + radius > canvas.width || x - radius < 0) {
dx = -dx;
}
if (y + radius > canvas.height || y - radius < 0) {
dy = -dy;
}

x += dx;
y += dy;

requestAnimationFrame(drawCircle);
}

drawCircle();

Mã này tạo ra một hình tròn xanh nhảy xung quanh canvas. Nó giống như tạo ra trò chơi Pong của riêng bạn!

Bảng phương thức Canvas

Dưới đây là bảng các phương thức Canvas phổ biến mà chúng ta đã sử dụng và một số phương thức khác:

Phương thức	Mô tả
fillRect(x, y, width, height)	Vẽ một hình chữ nhật đầy
strokeRect(x, y, width, height)	Vẽ một đường viền hình chữ nhật
clearRect(x, y, width, height)	Xóa khu vực hình chữ nhật được chỉ định
beginPath()	Bắt đầu một đường mới
moveTo(x, y)	Di chuyển đường đến điểm chỉ định
lineTo(x, y)	Vẽ một đường đến điểm chỉ định
arc(x, y, radius, startAngle, endAngle)	Vẽ một cung hoặc hình tròn
fill()	Điền đầy đường hiện tại
stroke()	Vẽ đường hiện tại
fillText(text, x, y)	Vẽ văn bản đầy vào canvas
strokeText(text, x, y)	Vẽ văn bản viền vào canvas

Nhớ rằng, học lập trình giống như học một ngôn ngữ mới. Nó đòi hỏi thời gian và thực hành, nhưng trước khi bạn biết điều đó, bạn sẽ tạo ra những điều kỳ diệu với Canvas! Tiếp tục thử nghiệm, kết hợp các hình dạng và phương thức khác nhau, và quan trọng nhất, hãy vui vẻ với nó. Ai biết được? Trò chơi web lớn tiếp theo có thể được tạo ra bởi bạn sử dụng Canvas!

Credits: Image by storyset