Hướng dẫn canvas html la gì - canvas html là gì
1. HTML5 Canvas là gì?#Canvas là một phần tử của HTML5, cho phép thực hiện lập trình kết xuất đồ họa các đối tượng hai chiều trên trang web. Canvas chiếm một khu vực trong trang web với chiều rộng và chiều cao định trước. Sau đó sử dụng Javascript có thể truy cập vào khu vực này để vẽ thông qua một tập các hàm đồ họa tương tự như các API 2D khác. Show
2. Tại sao lại dùng Canvas?#Bởi vì Canvas có thể giúp hiển thị trực quan một số hình ảnh dễ dàng trên trình duyệt như:
3. Cách tạo thẻ Canvas#Sử dụng Canvas không khó nhưng bạn cần có 1 ít kiến thức về Html và Javascript. Một số trình duyệt cũ không hỗ trợ canvas, bạn nên sử dụng Firefox 1.5 trở về sau, Opera 9 hoặc phiên bản mới hơn… Bạn có thể tham khảo thêm tại đây: http://caniuse.com/canvas Canvas chiếm một khu vực hình chữ nhật trên trang web mà kích thước của hình chữ nhật được quy định bởi nó. Lưu ý: Mặc định thẻ canvas sẽ không có đường viền và nội dung rỗng.
Lưu ý: Các thuộc tính và kích thước thường được xác định ngay bên trong thẻ canvas. Bạn có thể có nhiều thẻ 3 trên một trang HTML. Mặc định, thẻ canvas chỉ có 2 phần tử: 4 và 5. Nếu không được chỉ ra kích thước, thì kích thước mặc định là 6 chiều rộng và 7 chiều cao.
Vẽ trên Canvas với Javascript
Giải thích cho ví dụ trên: Trước tiên, ta tìm đến thẻ 3 thông qua id của nó:
Sau đó, gọi hàm 9 (nhập chuỗi “2d” vào):
Đối tượng 0 trong HTML5 sở hữu nhiều hàm dành cho vẽ hình ảnh như hình hộp, hình tròn, chữ,… 2 dòng sau vẽ ra một hình chữ nhật:
Thuộc tính 1 được dùng để gán CSS.Thuộc tính 2 để vẽ hình chữ nhật với các tham số tọa độ x,y, chiều rộng, chiều cao.Tọa độ Canvas Canvas là một dạng tọa độ lưới 3. Canvas là một dạng tọa độ lưới 3.Góc trên cùng bên trái của đối tượng canvas có tọa độ 4.Vậy nên, hàm 5 ở trên được thiết lập các tham số 6 có nghĩa là nằm sát phía trên bên trái và có kích thước là 7 pixels.
Kết quả
Kết quả
Kết quả
Canvas – Gradients
0Canvas – Gradients Gradients dùng để tô hình chữ nhật, hình tròn,đường thẳng, văn bản...Có 2 loại gradients:
1Canvas – Gradients
2Canvas – Gradients Gradients dùng để tô hình chữ nhật, hình tròn,đường thẳng, văn bản...Có 2 loại gradients: 4 – Quét màu xuất phát từ 1 phía 5 – Quét màu xuất phát từ tâmHàm var ctx = c.getContext("2d"); 6 quy định điểm dừng quét màu dọc theo điểm quét(gradient). Điểm gradient có thể ở bất kỳ giữa var ctx = c.getContext("2d"); 7 và var ctx = c.getContext("2d"); 8. Sau khi thiết lập gradient, ta dùng var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75); 1 hoặc ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75); 0 để gán gradient vào ô canvas.
Canvas – Hình ảnh |