HTML - Canvas: Hướng dẫn cơ bản về đồ họa web

Xin chào các pháp sư web tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của HTML Canvas. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ khám phá chủ đề này từng bước một. Vậy, hãy cầm lấy cọ vẽ ảo của bạn, và cùng nhau tạo ra những kiệt tác số!

Canvas HTML là gì?

Trước khi chúng ta bắt đầu, hãy hiểu rõ Canvas HTML là gì. Hãy tưởng tượng bạn có một tờ giấy trắng nơi bạn có thể vẽ bất cứ thứ gì bạn muốn - đó chính là Canvas, nhưng trong thế giới kỹ thuật số. Nó là một yếu tố HTML cho phép chúng ta vẽ đồ họa, tạo动画, và thậm chí phát triển trò chơi sử dụng JavaScript.

Ví dụ

Hãy bắt đầu với một ví dụ đơn giản để làm quen:

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

Mã này tạo ra một yếu tố canvas trên trang web của bạn. Nó giống như.setup một khung vẽ với một tờ canvas trống, sẵn sàng cho bạn thể hiện tài năng nghệ thuật của mình!

Bối cảnh vẽ

Bây giờ chúng ta đã có canvas, chúng ta cần một cách để vẽ lên nó. Đây là lúc bối cảnh vẽ ra vào cuộc. Hãy tưởng tượng nó như bộ công cụ vẽ của bạn. Chúng ta sẽ sử dụng JavaScript để lấy bối cảnh này:

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

Ở đây, chúng ta đang lấy canvas của mình và yêu cầu một bộ công cụ vẽ 2D. Nó giống như cầm lấy bút và palet của bạn!

Hỗ trợ trình duyệt

Trước khi chúng ta đi xa hơn, hãy lưu ý một chút về hỗ trợ trình duyệt.większość nowoczesnych przeglądarek hỗ trợ Canvas, nhưng luôn tốt hơn khi kiểm tra. Đây là một cách thuận tiện để phát hiện hỗ trợ:

if (canvas.getContext) {
// Canvas được hỗ trợ
} else {
// Canvas không được hỗ trợ
}

Mã này giống như hỏi, "Hey trình duyệt, bạn có thể xử lý thứ canvas tuyệt vời này không?" Nếu nó nói có, chúng ta có thể bắt đầu!

HTML Canvas - Vẽ hình chữ nhật

Hãy bắt đầu với thứ đơn giản - vẽ hình chữ nhật. Canvas có ba phương thức cho điều này:

Phương thức	Mô tả
fillRect(x, y, width, height)	Vẽ một hình chữ nhật được điền đầy
strokeRect(x, y, width, height)	Vẽ một đường viền hình chữ nhật
clearRect(x, y, width, height)	Xóa một khu vực hình chữ nhật xác định

Dưới đây là một ví dụ:

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

ctx.strokeStyle = "blue";
ctx.strokeRect(70, 10, 50, 50);

ctx.clearRect(30, 30, 30, 30);

Mã này vẽ một hình vuông đỏ, một hình chữ nhật viền xanh, và sau đó xóa một phần của hình vuông đỏ. Nó giống như vẽ bằng crayon và sau đó sử dụng cục tẩy!

HTML Canvas - Vẽ đường cong

Bây giờ, hãy thử một điều gì đó sáng tạo hơn với các đường cong. Đường cong là như những puzzle nối chấm. Dưới đây là cách chúng ta làm:

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

Điều này tạo ra một tam giác. Chúng ta bắt đầu tại (50, 50), vẽ một đường đến (200, 50), sau đó đến (200, 200), và cuối cùng đóng đường cong. Nó giống như chơi trò "đừng nhấc bút khỏi giấy"!

HTML Canvas - Vẽ đường thẳng

Vẽ đường thẳng tương tự như đường cong, nhưng đơn giản hơn. Dưới đây là một ví dụ:

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

Điều này vẽ một đường斜线 từ góc trên bên trái đến giữa bên phải của canvas. Nó giống như chơi trò nối chấm với chỉ hai chấm!

HTML Canvas - Vẽ đường cong Bezier

Bây giờ, hãy thêm một số đường cong vào bộ sưu tập của chúng ta. Đường cong Bezier giống như chữ viết cursive sang trọng trong thế giới vẽ:

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke();

Điều này tạo ra một đường cong bắt đầu từ (20, 20), sử dụng (20, 100) và (200, 100) jako điểm kiểm soát, và kết thúc tại (200, 20). Nó giống như vẽ một nụ cười!

HTML Canvas - Vẽ đường cong Quadratic

Đường cong Quadratic là như một người cousin đơn giản hơn của Bezier:

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(100, 100, 180, 20);
ctx.stroke();

Điều này tạo ra một đường cong từ (20, 20) đến (180, 20), với (100, 100) là điểm kiểm soát. Nó hoàn hảo cho việc vẽ các cung!

HTML Canvas - Sử dụng hình ảnh

Canvas không chỉ về việc vẽ - chúng ta cũng có thể làm việc với hình ảnh:

var img = new Image();
img.onload = function() {
ctx.drawImage(img, 10, 10);
};
img.src = 'myImage.png';

Điều này tải một hình ảnh và vẽ nó trên canvas của chúng ta. Nó giống như dán một tem vào sổ tay kỹ thuật số của bạn!

HTML Canvas - Tạo Gradient

Hãy thêm một chút màu sắc với các gradient:

var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "blue");

ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);

Điều này tạo ra một gradient từ đỏ đến xanh và sử dụng nó để điền đầy một hình chữ nhật. Nó giống như tạo một buổi hoàng hôn kỹ thuật số!

HTML Canvas - Styles và Màu sắc

Canvas cung cấp nhiều cách để tạo样式 cho bản vẽ của chúng ta:

ctx.fillStyle = "yellow";
ctx.strokeStyle = "black";
ctx.lineWidth = 5;

ctx.fillRect(25, 25, 100, 100);
ctx.strokeRect(25, 25, 100, 100);

Điều này tạo ra một hình vuông vàng với viền đen dày. Nó giống như tô màu trong các đường viền, nhưng chúng ta được chọn các đường viền!

HTML Canvas - Văn bản và Phông chữ

Chúng ta cũng có thể thêm văn bản vào canvas của mình:

ctx.font = "30px Arial";
ctx.fillText("Xin chào, Canvas!", 10, 50);

Điều này viết "Xin chào, Canvas!" trong phông chữ Arial 30px. Nó giống như thêm chú thích vào tác phẩm nghệ thuật kỹ thuật số của bạn!

HTML Canvas - Mẫu và Bóng

Hãy thêm một chút chiều sâu với các mẫu và bóng:

var img = new Image();
img.src = 'pattern.png';
img.onload = function() {
var pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 200, 200);
};

ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 100, 100);

Điều này tạo ra một nền mẫu và một hình vuông xanh có bóng. Nó giống như thêm chất liệu và chiều sâu vào tranh vẽ kỹ thuật số của bạn!

HTML Canvas - Lưu và Khôi phục Trạng thái

Canvas cho phép chúng ta lưu và khôi phục trạng thái vẽ:

ctx.fillStyle = "blue";
ctx.save();

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

ctx.restore();
ctx.fillRect(70, 10, 50, 50);

Điều này vẽ một hình vuông đỏ, sau đó một hình vuông xanh. Nó giống như có nhiều lớp trong tác phẩm nghệ thuật kỹ thuật số của bạn!

HTML Canvas - Di chuyển

Chúng ta có thể di chuyển điểm vẽ gốc:

ctx.translate(100, 50);
ctx.fillRect(0, 0, 50, 50);

Điều này di chuyển điểm vẽ và sau đó vẽ một hình vuông. Nó giống như di chuyển tờ giấy trước khi bắt đầu vẽ!

HTML Canvas - Xoay

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

ctx.rotate(Math.PI / 4);
ctx.fillRect(50, -25, 100, 50);

Điều này xoay canvas và vẽ một hình vuông. Nó giống như quay tờ giấy ở một góc trước khi vẽ!

HTML Canvas - Đổi tỷ lệ

Chúng ta cũng có thể thay đổi tỷ lệ của bản vẽ của mình:

ctx.scale(2, 2);
ctx.fillRect(25, 25, 50, 50);

Điều này gấp đôi kích thước của mọi thứ chúng ta vẽ. Nó giống như sử dụng kính lúp trên tác phẩm nghệ thuật của bạn!

HTML Canvas - Chuyển đổi

Chuyển đổi cho phép chúng ta thực hiện các manipulations phức tạp hơn:

ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillRect(0, 0, 50, 50);

Điều này áp dụng một chuyển đổi phức tạp trước khi vẽ. Nó giống như uốn cong thực tế trong thế giới kỹ thuật số của bạn!

HTML Canvas - Hợp thành

Chúng ta có thể kiểm soát cách các bản vẽ mới tương tác với các bản vẽ hiện có:

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

ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

Điều này vẽ một hình vuông xanh, sau đó một hình vuông đỏ lên trên. Nó giống như chồng các lớp sơn lên nhau!

HTML Canvas - Hoạt hình

Cuối cùng, hãy mang canvas của chúng ta sống động với hoạt hình:

var x = 0;

function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, 0, 50, 50);
x += 2;
if (x > canvas.width) x = 0;
requestAnimationFrame(animate);
}

animate();

Điều này tạo ra một hình vuông di chuyển qua màn hình. Nó giống như tạo ra một bộ phim nhỏ của riêng bạn!

Và thế là bạn đã có một chuyến du lịch nhanh chóng qua HTML Canvas! Nhớ rằng, chìa khóa để thành thạo Canvas là thực hành. Vậy, hãy thử nghiệm, chơi đùa và quan trọng nhất, hãy vui vẻ! Ai biết được, bạn có thể tạo ra kiệt tác số tiếp theo. Chúc mừng bạn, những Picassos tương lai của web!

Credits: Image by storyset