Canvas trong HTML5 Phần tử HTML5 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à
Trang 1Canvas trong HTML5
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ứcgetElementByid() 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
Nó 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 }
Trang 2Trì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
bao gồm Javascript sau:
<! [if IE]><script src="excanvas.js"></script><![endif] >
Ví dụ HTML5 Canvas
Sau đây là các ví dụ liên quan tới phần tử HTML5 <canvas>
HTML5 <canvas>
<canvas>
Vẽ đường cong Quadratic Học cách vẽ đường cong quandratic sử dụng phần tử HTML5
<canvas>
Trang 3<canvas>
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
đ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
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