HTML5 - Canvas

Phần tử HTML5 <canvas> cung cấp cho bạn một cách 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 phần tử <canvas> đơn giản 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 HTML5 cốt lõi như id, tên và lớp, v.v.

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

Bạn có thể dễ dàng tìm thấy phần tử <canvas> đó trong DOM bằng phương thức getElementById () như sau:

var canvas = document.getElementById("mycanvas");

Hãy để chúng tôi xem một ví dụ đơn giản về cách sử dụng phần tử <canvas> trong tài liệu HTML5.

<!DOCTYPE HTML>

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

Điều này sẽ tạo ra kết quả sau:

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

<canvas> ban đầu trống và để hiển thị một cái gì đó, trước tiên một script cầ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ó. Hàm này nhận một tham số, loại ngữ cảnh2d.

Sau đây là mã để có được ngữ cảnh cần thiết cùng với kiểm tra xem trình duyệt của bạn có hỗ trợ phần tử <canvas> hay không -

var canvas  = document.getElementById("mycanvas");

if (canvas.getContext) {   
   var ctx = canvas.getContext('2d');   
   // drawing code here   
} else {   
   
   // canvas-unsupported code here 
}

Hỗ trợ trình duyệt

Các phiên bản mới nhất của Firefox, Safari, Chrome và Opera đều hỗ trợ HTML5 Canvas nhưng IE8 không hỗ trợ canvas nguyên bản.

Bạn có thể sử dụng ExplorerCanvas để hỗ trợ canvas thông qua Internet Explorer. Bạn chỉ cần bao gồm JavaScript này như sau:

<!--[if IE]><script src = "excanvas.js"></script><![endif]-->

Ví dụ về Canvas HTML5

Hướng dẫn này bao gồm các ví dụ sau liên quan đến phần tử HTML5 <canvas>.

Sr.No.	Ví dụ & Mô tả
1	Vẽ hình chữ nhật Tìm hiểu cách vẽ hình chữ nhật bằng phần tử <canvas> của HTML5
2	Vẽ đường dẫn Tìm hiểu cách tạo hình bằng cách sử dụng đường dẫn trong phần tử <canvas> của HTML5
3	Vẽ đường Tìm hiểu cách vẽ đường bằng phần tử <canvas> của HTML5
4	Vẽ Bezier Tìm hiểu cách vẽ đường cong Bezier bằng phần tử <canvas> của HTML5
5	Vẽ bậc hai Tìm hiểu cách vẽ đường cong bậc hai bằng phần tử HTML5 <canvas>
6	Sử dụng hình ảnh Tìm hiểu cách sử dụng hình ảnh với phần tử <canvas> của HTML5
7	Tạo Gradients Tìm hiểu cách tạo gradient bằng phần tử HTML5 <canvas>
số 8	Kiểu dáng và màu sắc Tìm hiểu cách áp dụng kiểu và màu bằng phần tử <canvas> của HTML5
9	Văn bản và Phông chữ Học cách vẽ văn bản tuyệt vời bằng cách sử dụng các phông chữ khác nhau và kích thước của chúng.
10	Hoa văn và Bóng Học cách vẽ các mẫu khác nhau và đổ bóng.
11	Canvas States Tìm hiểu cách lưu và khôi phục trạng thái canvas trong khi thực hiện các bản vẽ phức tạp trên canvas.
12	Bản dịch Canvas Phương pháp này được sử dụng để di chuyển canvas và điểm gốc của nó đến một điểm khác trong lưới.
13	Xoay canvas Phương pháp này được sử dụng để xoay canvas xung quanh điểm gốc hiện tại.
14	Quy mô canvas Phương pháp này được sử dụng để tăng hoặc giảm các đơn vị trong lưới canvas.
15	Chuyển đổi canvas Các phương pháp này cho phép sửa đổi trực tiếp ma trận biến đổi.
16	Thành phần canvas Phương pháp này được sử dụng để che một số khu vực nhất định hoặc xóa các phần khỏi canvas.
17	Hoạt ảnh Canvas Tìm hiểu cách tạo hoạt ảnh cơ bản bằng HTML5 canvas và JavaScript.