Phần tử HTML5 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 hoạt ảnh đơn giản (và không đơn giản như vậy) Show
Đây là một phần tử đơn giản chỉ có hai thuộc tính cụ thể chiều rộng và chiều cao 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. Bạn có thể dễ dàng tìm thấy phần tử đó trong DOM bằng cách sử dụng phương thức getElementById() như sau - var canvas = document.getElementById("mycanvas");
Chúng ta hãy xem một ví dụ đơn giản về cách sử dụng phần tử trong tài liệu HTML5
Điều này sẽ tạo ra kết quả sau - Bối cảnh kết xuấtBan đầu, nó trống và để hiển thị nội dung nào đó, trước tiên tập lệnh 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 ngữ cảnh hiển thị và các chức năng vẽ của nó. Hàm này nhận một tham số, loại context2d Sau đây là mã để nhận ngữ cảnh bắt buộc cùng với kiểm tra xem trình duyệt của bạn có hỗ trợ phần tử 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ệtCá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 để có hỗ trợ canvas thông qua Internet Explorer. Bạn chỉ cần bao gồm JavaScript này như sau - Canvas trong HTML là một khu vực có thể vẽ đồ họa bằng Javascript Thẻ tạo vùng chứa đồ họa JavaScript sau đó vẽ đường dẫn, hình dạng, văn bản, hình ảnh, v.v. bên trong container này Một phần tử có mã vẽ JavaScript Thẻ tạo vùng chứa đồ họa có chiều rộng và chiều cao nhất định JavaScript vẽ các hình dạng, chẳng hạn như đường thẳng, hình tròn, văn bản và hình ảnh bên trong vùng chứa Canvas hỗ trợ các chức năng vẽ nâng cao bao gồm hình dạng, cắt, biến đổi, v.v. Vẽ một đường bằng CanvasSử dụng các hàm Vẽ hình tròn bằng CanvasSử dụng các hàm stroke để vẽ một vòng tròn trên canvasSử dụng hàm Vẽ nét chữ bằng CanvasSử dụng hàm Vẽ màu gradient tuyến tính bằng CanvasVí dụ này tô hình chữ nhật bằng dải màu tuyến tính Trước tiên, JavaScript tạo một dải màu tuyến tính với Sau đó, gradient này được sử dụng để tô và vẽ hình chữ nhật bằng hàm Vẽ màu gradient hình tròn bằng CanvasVí dụ này tô hình chữ nhật bằng dải màu hình tròn Trước tiên, JavaScript tạo một dải màu hình tròn với Sau đó, gradient này được sử dụng để tô và vẽ hình chữ nhật bằng hàm  Sử dụng canvas để tạo hoạt ảnh nhanhCanvas rất nhanh, cho phép bạn tạo các hoạt ảnh thú vị Hoạt hình lịch sự của www. mozilla. tổ chức Đây là thời điểm bắt đầu hỗ trợ cho từng trình duyệt Để biết chi tiết về , hãy xem Tham khảo thẻ canvas HTML của chúng tôi
[Một trình chỉnh sửa có sẵn ở cuối trang để viết và thực thi các tập lệnh. ] 17. Làm thế nào để vẽ đồ họa, một cách nhanh chóng, thông qua kịch bản? Mã HTML Hãy thử nó trong trình chỉnh sửa sau hoặc xem giải pháp a. Làm cách nào để chỉ định chiều cao của canvas? b. Làm cách nào để chỉ định chiều rộng của canvas? Xem trình chỉnh sửa chung Pen html css của w3resource (@w3resource) trên CodePen Trước. Làm cách nào để xác định nút có thể nhấp? Mức độ khó của bài tập này là gì? Dễ dàng trung bình khóKiểm tra kỹ năng Lập trình của bạn với bài kiểm tra của w3resource Theo dõi chúng tôi trên Facebook và Twitter để cập nhật thông tin mới nhất. HTML-CSS. Lời khuyên trong ngàyLàm thế nào để nộp. sử dụng quan trọng. css()? Hầu hết các câu trả lời này hiện đã lỗi thời, hỗ trợ IE7 không phải là vấn đề Cách tốt nhất để làm điều này hỗ trợ IE11+ và tất cả các trình duyệt hiện đại là const $elem = $("#elem");
$elem[0].style.setProperty('width', '100px', 'important');
Bạn có thể tạo đồ họa bằng HTML không?Phần tử HTML . Đồ họa bên dưới được tạo bằng
Thẻ nào được sử dụng để vẽ đồ họa?Thẻ được sử dụng để vẽ đồ họa một cách nhanh chóng thông qua tập lệnh (thường là JavaScript).
Làm cách nào để thêm đồ họa trong HTML CSS?Để đưa hình ảnh vào tài liệu HTML của bạn, hãy sử dụng thẻ . URL điểm x,y chỉ định một điểm có thể nhấp vào trong hình ảnh. . URL vòng kết nối x,y x,y chỉ định một vòng kết nối. . rect URL x,y x,y chỉ định một hình chữ nhật ở góc trên bên trái và góc dưới bên phải của nó poly URL x,y x,y chỉ định một đa giác có tối đa 100 cạnh Chúng ta có thể vẽ hình trong HTML5 không?Bạn có thể vẽ các hình dạng như hình tròn, hình chữ nhật, đường thẳng, v.v. bằng cách sử dụng SVG trong HTML5 một cách dễ dàng . Hãy xem một ví dụ để vẽ một hình chữ nhật bằng SVG. |
