WebGL - Tổng quan về Canvas Html5

Để tạo các ứng dụng đồ họa trên web, HTML-5 cung cấp một bộ tính năng phong phú như 2D Canvas, WebGL, SVG, chuyển đổi 3D CSS và SMIL. Để viết các ứng dụng WebGL, chúng tôi sử dụng phần tử canvas hiện có của HTML-5. Chương này cung cấp tổng quan về phần tử canvas HTML-5 2D.

HTML5 Canvas

HTML-5 <canvas>cung cấp một tùy chọn dễ dàng và mạnh mẽ để vẽ đồ họa bằng JavaScript. Nó có thể được sử dụng để vẽ đồ thị, tạo bố cục ảnh hoặc tạo các hoạt ảnh đơn giản (và không đơn giản như vậy).

Đây là một đơn giản <canvas> phần tử chỉ có hai thuộc tính cụ thể width và height cộng với tất cả các thuộc tính HTML-5 cốt lõi như id, tên và lớp.

Cú pháp

Cú pháp của thẻ canvas HTML được đưa ra bên dưới. Bạn phải đề cập đến tên của canvas bên trong dấu ngoặc kép (“”).

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

Thuộc tính Canvas

Thẻ canvas có ba thuộc tính là id, width và height.

Id- Id đại diện cho định danh của phần tử canvas trong Mô hình đối tượng tài liệu (DOM) .
Width - Chiều rộng thể hiện chiều rộng của canvas.
Height - Chiều cao thể hiện chiều cao của canvas.

Các thuộc tính này xác định kích thước của canvas. Nếu một lập trình viên không chỉ định chúng trong thẻ canvas, thì theo mặc định, các trình duyệt như Firefox, Chrome và Web Kit sẽ cung cấp phần tử canvas có kích thước 300 × 150.

Ví dụ - Tạo Canvas

Đoạn mã sau đây cho thấy cách tạo canvas. Chúng tôi đã sử dụng CSS để tạo đường viền màu cho canvas.

<html>
   <head>
      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>
   <body>
      <canvas id = "mycanvas" width = "100" height = "100"></canvas>
   </body>
</html>

Khi thực thi, đoạn mã trên sẽ tạo ra kết quả sau:

Bối cảnh kết xuất

<canvas> ban đầu để trống. Để hiển thị thứ gì đó trên phần tử canvas, chúng ta phải sử dụng ngôn ngữ kịch bản. Ngôn ngữ kịch bản này nên truy cập vào ngữ cảnh kết xuất và vẽ trên đó.

Phần tử canvas có một phương thức DOM được gọi là getContext(), được sử dụng để lấy bối cảnh kết xuất và các chức năng vẽ của nó. Phương thức này nhận một tham số, loại ngữ cảnh2d.

Đoạn mã sau sẽ được viết để có được ngữ cảnh cần thiết. Bạn có thể viết script này bên trong thẻ body như hình bên dưới.

<!DOCTYPE HTML>
<html>
   <body>
      <canvas id = "mycanvas" width = "600" height = "200"></canvas>

      <script>
         var canvas = document.getElementById('mycanvas');
         var context = canvas.getContext('2d');
			
         context.font = '20pt Calibri';
         context.fillStyle = 'green';
         context.fillText('Welcome to Tutorialspoint', 70, 70);
      </script>
   </body>
</html>

Khi thực thi, đoạn mã trên sẽ tạo ra kết quả sau:

Để biết thêm ví dụ về HTML-5 2D Canvas, hãy xem liên kết sau HTML-5 Canvas .

Bối cảnh WebGL

HTML5 Canvas cũng được sử dụng để viết các ứng dụng WebGL. Để tạo ngữ cảnh kết xuất WebGL trên phần tử canvas, bạn nên chuyển chuỗiexperimental-webgl, thay vì 2d đến canvas.getContext()phương pháp. Một số trình duyệt chỉ hỗ trợ 'webgl'.

<!DOCTYPE html>
<html>
   <canvas id = 'my_canvas'></canvas>
	
   <script>
      var canvas = document.getElementById('my_canvas');
      var gl = canvas.getContext('experimental-webgl');
      gl.clearColor(0.9,0.9,0.8,1);
      gl.clear(gl.COLOR_BUFFER_BIT);
   </script>
</html>

Khi thực thi, đoạn mã trên sẽ tạo ra kết quả sau: