WebGL - Tổng quan về HTML5 Canvas

Xin chào, những pháp sư đồ họa 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 WebGL và HTML5 Canvas. Là người dạy máy tính hàng xóm thân thiện của bạn, tôi rất vui mừng được dẫn dắt bạn trong chuyến phiêu lưu này. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - chúng ta sẽ bắt đầu từ những điều cơ bản và dần dần nâng cao. Vậy, cầm lấy cọ vẽ ảo của bạn, và chúng ta cùng bắt đầu thôi!

WebGL - Html5 Canvas Overview

HTML5 Canvas

HTML5 Canvas là gì?

Hãy tưởng tượng bạn có một bảng vẽ kỹ thuật số ma thuật nơi bạn có thể vẽ bất cứ thứ gì bạn muốn bằng mã. Đó chính xác là HTML5 Canvas! Nó là một phần tử mạnh mẽ được giới thiệu trong HTML5 cho phép chúng ta vẽ đồ họa, tạo动画, và thậm chí xây dựng trò chơi trực tiếp trong trình duyệt web của chúng ta.

Tạo Canvas Đầu Tiên

Hãy bắt đầu bằng cách tạo một HTML5 Canvas đơn giản:

<!DOCTYPE html>
<html>
<head>
<title>Canvas Đầu Tiên Của Tôi</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
</body>
</html>

Trong ví dụ này, chúng ta đã tạo một phần tử canvas với id là "myCanvas", chiều rộng 400 pixel và chiều cao 200 pixel. Nó giống như việc.setup một khung vẽ với một bảng vẽ trống - bây giờ chúng ta đã sẵn sàng để vẽ!

Vẽ trên Canvas

Bây giờ chúng ta đã có canvas, hãy vẽ điều gì đó lên nó. Chúng ta sẽ sử dụng JavaScript để làm điều này:

<!DOCTYPE html>
<html>
<head>
<title>Vẽ trên Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 50);
</script>
</body>
</html>

Hãy phân tích điều này:

Chúng ta lấy một tham chiếu đến phần tử canvas bằng getElementById.
Chúng ta lấy ngữ cảnh vẽ 2D của canvas bằng getContext('2d').
Chúng ta đặt màu.fill là xanh lam bằng fillStyle.
Cuối cùng, chúng ta vẽ một hình chữ nhật xanh lam bằng fillRect(x, y, width, height).

Khi bạn mở điều này trong trình duyệt, bạn sẽ thấy một hình chữ nhật xanh lam xuất hiện trên canvas. Chúc mừng! Bạn đã tạo ra tác phẩm nghệ thuật kỹ thuật số đầu tiên của mình!

Ngữ cảnh Vẽ

Ngữ cảnh Vẽ là gì?

Hãy tưởng tượng ngữ cảnh vẽ như bộ công cụ vẽ của bạn. Nó cung cấp các phương thức và thuộc tính cho phép bạn vẽ trên canvas. Trong ví dụ trước, chúng ta đã sử dụng ngữ cảnh vẽ 2D, nhưng cũng có các loại khác.

Ngữ cảnh Vẽ 2D

Ngữ cảnh vẽ 2D là loại được sử dụng phổ biến nhất và cung cấp một loạt các hàm vẽ 2D. Dưới đây là bảng một số phương thức hữu ích của ngữ cảnh 2D:

Phương thức	Mô tả
fillRect(x, y, width, height)	Vẽ một hình chữ nhật.fill
strokeRect(x, y, width, height)	Vẽ viền của một hình chữ nhật
fillText(text, x, y)	Vẽ văn bản.fill
strokeText(text, x, y)	Vẽ viền của văn bản
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 vòng tròn

Hãy sử dụng một số phương thức này để tạo một bức vẽ phức tạp hơn:

<!DOCTYPE html>
<html>
<head>
<title>Bức Vẽ Phức Tạp</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// Vẽ một ngôi nhà
ctx.fillStyle = 'brown';
ctx.fillRect(100, 100, 150, 100);

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

// Vẽ một cửa
ctx.fillStyle = 'yellow';
ctx.fillRect(160, 150, 30, 50);

// Vẽ văn bản
ctx.fillStyle = 'black';
ctx.font = '20px Arial';
ctx.fillText('Ngôi Nhà Của Tôi', 140, 190);
</script>
</body>
</html>

Trong ví dụ này, chúng ta đã vẽ một ngôi nhà đơn giản bằng các phương thức khác nhau của ngữ cảnh 2D. Chúng ta sử dụng fillRect cho thân và cửa ngôi nhà, beginPath, moveTo, và lineTo cho mái nhà, và fillText để thêm nhãn. Thử thay đổi các tọa độ và màu sắc để tạo ra ngôi nhà độc đáo của bạn!

Ngữ cảnh WebGL

Giới thiệu về WebGL

Bây giờ, hãy bước vào thế giới thú vị của đồ họa 3D với WebGL. WebGL (Web Graphics Library) là một API JavaScript cho việc渲染 đồ họa tương tác 3D và 2D trong bất kỳ trình duyệt web nào tương thích mà không cần sử dụng plug-in.

Lấy Ngữ cảnh WebGL

Để sử dụng WebGL, chúng ta cần lấy ngữ cảnh vẽ WebGL thay vì ngữ cảnh vẽ 2D. Dưới đây là cách làm:

<!DOCTYPE html>
<html>
<head>
<title>Ngữ cảnh WebGL</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');

if (!gl) {
console.log('WebGL không được hỗ trợ, quay lại sử dụng experimental-webgl');
gl = canvas.getContext('experimental-webgl');
}

if (!gl) {
alert('Trình duyệt của bạn không hỗ trợ WebGL');
}
</script>
</body>
</html>

Trong ví dụ này, chúng ta thử lấy ngữ cảnh WebGL. Nếu không được hỗ trợ, chúng ta quay lại sử dụng ngữ cảnh experimental-webgl. Nếu cả hai đều không khả dụng, chúng ta thông báo cho người dùng rằng trình duyệt của họ không hỗ trợ WebGL.

Ví dụ WebGL Đơn Giản

Hãy tạo một ví dụ WebGL đơn giản để làm sạch canvas với một màu:

<!DOCTYPE html>
<html>
<head>
<title>WebGL Đơn Giản</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');

if (!gl) {
console.log('WebGL không được hỗ trợ, quay lại sử dụng experimental-webgl');
gl = canvas.getContext('experimental-webgl');
}

if (!gl) {
alert('Trình duyệt của bạn không hỗ trợ WebGL');
} else {
// Đặt màu làm sạch thành đỏ,完全不 trong suốt
gl.clearColor(1.0, 0.0, 0.0, 1.0);
// Làm sạch bộ đệm màu với màu chỉ định
gl.clear(gl.COLOR_BUFFER_BIT);
}
</script>
</body>
</html>

Trong ví dụ này, chúng ta đặt màu làm sạch thành đỏ bằng gl.clearColor(red, green, blue, alpha), nơi mỗi giá trị dao động từ 0.0 đến 1.0. Sau đó, chúng ta làm sạch bộ đệm màu với màu này bằng gl.clear(gl.COLOR_BUFFER_BIT). Khi bạn chạy điều này, bạn sẽ thấy một canvas đỏ.

Lưu ý, WebGL phức tạp hơn nhiều so với việc vẽ 2D và bao gồm các khái niệm như shaders, buffers, và ma trận. Nhưng đừng lo lắng! Chúng ta sẽ khám phá những điều này trong các bài học tiếp theo.

Kết luận

Chúc mừng! Bạn đã bước những bước đầu tiên vào thế giới HTML5 Canvas và WebGL. Chúng ta đã covered các khái niệm cơ bản của việc tạo canvas, vẽ trong 2D, và thậm chí đã thử nghiệm với thế giới 3D của WebGL.

Nhớ rằng, việc học lập trình đồ họa giống như việc học vẽ - nó đòi hỏi sự thực hành và kiên nhẫn. Đừng ngại thử nghiệm với các ví dụ mã, thay đổi các giá trị, và xem会发生什么. Càng chơi với mã, bạn sẽ càng hiểu rõ hơn về cách mọi thứ hoạt động.

Trong bài học tiếp theo, chúng ta sẽ đi sâu hơn vào các kỹ thuật vẽ 2D nâng cao và bắt đầu khám phá thế giới fascinante của WebGL shaders. Đến那时候, hãy tiếp tục lập trình và chúc bạn vui vẻ khi vẽ!

Credits: Image by storyset