Canvas Trong HTML5 | 44 Thẻ HTML5 Hay Nhất
Có thể bạn quan tâm
Phần tử HTML5 <canvas> cho bạn một cách dễ dàng và mạnh mẽ để vẽ đồ họa bởi sử dụng JavaScript. Nó có thể được sử dụng để vẽ đồ thị, tạo photo, và làm các hiệu ứng.
Ở đây là một thẻ <canvas> đơn giản mà chỉ có hai thuộc tính riêng width và height cộng với tất cả các thuộc tính core trong HTML5 như id, name, và class, …
<canvas id="mycanvas" width="100" height="100"></canvas>Bạn có thể dễ dàng tìm thấy rằng phần tử <canvas> trong DOM sử dụng phương thức getElementByid() như sau:
var canvas = document.getElementById("mycanvas");Bây giờ chúng ta cùng xem một ví dụ đơn giản 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> Quảng cáoNó sẽ cho kết quả sau:
Rendering Context
Phần tử <canvas> lúc đầu là trống, và để hiển thị một cái gì đó, một script đầu tiên cần để truy cập Rendering Context và vẽ trên nó.
Phần tử canvas có một phương thức DOM được gọi là getContext, được sử dụng để đạt được Rendering Context và các hàm vẽ của nó. Hàm này nhận một tham số, kiểu của context là 2d.
Sau đây là code để nhận context được yêu cầu cùng với một kiểm tra nếu trình duyệt của bạn 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 }Trình duyệt hỗ trợ
Phiên bản mới nhất của Firefox, Safari, Chrome và Opera tất cả hỗ trợ cho HTML5 Canvas nhưng IE8 không hỗ trợ Canvas.
Bạn có thể sử dụng ExplorerCanvas để có sự hỗ trợ Canvas thông qua IE. Bạn chỉ cần bao gồm Javascript sau:
<!--[if IE]><script src="excanvas.js"></script><![endif]--> Quảng cáoVí dụ HTML5 Canvas
Sau đây là các ví dụ liên quan tới phần tử HTML5 <canvas>.
Ví dụ | Miêu tả |
---|---|
Vẽ hình chữ nhật | Học cách vẽ hình chữ nhật sử dụng phần tử HTML5 <canvas> |
Vẽ đường | Học cách để tạo Shape sử dụng các đường (path) trong phần tử HTML5 <canvas> |
Vẽ đường thẳng | Học cách vẽ đường thẳng sử dụng phần tử HTML5 <canvas> |
Vẽ đường cong Bezier | Học cách vẽ đường cong bezier sử dụng phần tử HTML5 <canvas> |
Vẽ đường cong Quadratic | Học cách vẽ đường cong quandratic sử dụng phần tử HTML5 <canvas> |
Sử dụng hình ảnh | Học cách để sử dụng các ảnh với phần tử HTML5 <canvas> |
Tạo Gradient | Học cách để tạo Gradient sử dụng phần tử HTML5 <canvas> |
Style và Color | Học cách để áp dụng Style và màu sử dụng phần tử HTML5 <canvas> |
Text và Font | Học cách để tạo các văn bản với các font và kích cỡ khác nhau. |
Pattern và Shadow | Học cách để vẽ các pattern và Shade (shadow) |
Trạng thái Canvas | Học cách để lưu và hồi phục các trạng thái canvas trong khi thực hiện các hoạt động vẽ phức tạp trên một canvas. |
Phương thức Translate | Phương thức này được sử dụng để di chuyển canvas và điểm gốc của nó tới một điểm khác trong grid. |
Phương thức Rotate | Phương thức này được sử dụng để quay canvas xung quanh điểm gốc hiện tại. |
Phương thức Scale | Phương thức này được sử dụng để tăng hoặc giảm các đơn vị trong Canvas Grid. |
Phương thức Transform | Phương thức này cho phép các chỉnh sửa trực tiếp tới ma trận biến đổi. |
Phương thức globalcompositeoperation | Phương thức này được sử dụng để che đi các khu vực nhất định hoặc xóa các khu vực từ canvas. |
Hiệu ứng trong HTML5 Canvas | Học cách tạo hiệu ứng cơ bản sử dụng HTML5 canvas và JavaScript. |
Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.
Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:
Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Bài học HTML5 phổ biến khác tại vietjack.com:
- Cú pháp HTML5 cơ bản
- Thuộc tính
- Sự kiện
- Giới thiệu Web Forms 2.0
- Giới thiệu SVG
- Giới thiệu MathML
- Web Storage là gì ?
160 bài học ngữ pháp tiếng Anh hay nhất
155 bài học Java tiếng Việt hay nhất
100 bài học Android tiếng Việt hay nhất
247 bài học CSS tiếng Việt hay nhất
197 thẻ HTML cơ bản
297 bài học PHP
101 bài học C++ hay nhất
97 bài tập C++ có giải hay nhất
208 bài học Javascript có giải hay nhất
Từ khóa » Học Canvas Html5
-
HTML5 Canvas Là Gì? - Freetuts
-
Giới Thiệu Về Canvas Trong HTML5 - Viblo
-
Giới Thiệu Về Canvas | Học Lập Trình Cùng Hocjavascript
-
Canvas Trong HTML5
-
Bài 35: Phần Tử Canvas Trong HTML5 | Tìm ở đây
-
HTML5 Canvas - TEDU
-
Canvas Trong HTML5 - Hoclaptrinh
-
Phần Tử Canvas Trong HTML5
-
Làm Thế Nào để Sử Dụng HTML5 Canvas Element Với JavaScript
-
[Tự Học HTML] Thế Nào Là Canvas Trong đồ Hoạ Của HTML? - Cafedev
-
HTML5 Canvas - CodeHub
-
HTML5 Canvas - Lập Trình Và Quản Trị Hệ Thống
-
Hướng Dẫn Tự Học HTML5 Từ Cơ Bản Tới Nâng Cao
-
Hướng Dẫn Học CSS3 & HTML5 (Phần 4: Chi Tiết Cuối Cùng)