HTML vải
|
Phần tử canvas là một phần của HTML5 và cho phép hiển thị hình dạng 2D và hình ảnh bitmap động, có thể viết thành tập lệnh. Đây là một mô hình thủ tục, cấp thấp, cập nhật một bitmap. HTML5 Canvas cũng giúp tạo trò chơi 2D Show
Mặc dù canvas HTML5 cung cấp API vẽ 2D của riêng nó, nhưng nó cũng hỗ trợ API WebGL để cho phép hiển thị 3D với OpenGL ES Lịch sử[sửa]Canvas ban đầu được Apple giới thiệu để sử dụng trong thành phần Mac OS X WebKit của riêng họ vào năm 2004, cung cấp năng lượng cho các ứng dụng như tiện ích Bảng điều khiển và trình duyệt Safari. Sau đó, vào năm 2005, nó đã được thông qua trong phiên bản 1. 8 của trình duyệt Gecko và Opera vào năm 2006 và được chuẩn hóa bởi Nhóm Công tác Công nghệ Ứng dụng Siêu văn bản Web (WHATWG) về các thông số kỹ thuật mới được đề xuất cho các công nghệ web thế hệ tiếp theo. [cần dẫn nguồn] Một Tương tác với canvas liên quan đến việc lấy bối cảnh kết xuất của canvas, điều này xác định xem có nên sử dụng bối cảnh kết xuất API, WebGL hoặc WebGL2 của canvas hay không Ví dụ[sửa]Đoạn mã sau tạo một phần tử Canvas trong trang HTML This text is displayed if your browser does not support HTML5 Canvas. Sử dụng JavaScript, bạn có thể vẽ trên canvas var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);
Mã này vẽ một hình chữ nhật màu đỏ trên màn hình API Canvas cũng cung cấp Kích thước phần tử canvas so với kích thước bề mặt vẽ[sửa]Một canvas thực sự có hai kích cỡ. kích thước của chính phần tử và kích thước bề mặt vẽ của phần tử. Đặt thuộc tính chiều rộng và chiều cao của phần tử sẽ đặt cả hai kích thước này; Theo mặc định, cả kích thước của phần tử canvas và kích thước bề mặt bản vẽ của nó là rộng 300 pixel màn hình và cao 150 pixel màn hình. Trong danh sách được hiển thị trong ví dụ, sử dụng CSS để đặt kích thước của phần tử canvas, kích thước của phần tử là rộng 600 pixel và cao 300 pixel, nhưng kích thước của bề mặt bản vẽ không thay đổi ở giá trị mặc định là 300 pixel × 150 . Khi kích thước của phần tử canvas không khớp với kích thước bề mặt bản vẽ của nó, trình duyệt sẽ chia tỷ lệ bề mặt bản vẽ để vừa với phần tử (điều này có thể dẫn đến các hiệu ứng bất ngờ và không mong muốn) Ví dụ đặt kích thước phần tử và kích thước bề mặt bản vẽ thành các giá trị khác nhau
Canvas element size: 600 x 300,
Canvas drawing surface size: 300 x 150
Canvas not supported
Canvas so với Đồ họa Vector có thể mở rộng (SVG)[sửa | sửa mã nguồn]SVG là một cách tiếp cận khác để vẽ hình trong trình duyệt. Không giống như canvas, dựa trên raster, SVG dựa trên vectơ, do đó, mỗi hình dạng được vẽ được ghi nhớ dưới dạng một đối tượng trong biểu đồ cảnh hoặc Mô hình đối tượng tài liệu, sau đó được hiển thị thành bitmap. Điều này có nghĩa là nếu các thuộc tính của đối tượng SVG bị thay đổi, trình duyệt có thể tự động hiển thị lại cảnh Mặt khác, các đối tượng canvas được vẽ ở chế độ ngay lập tức. Trong ví dụ canvas ở trên, thao tác vẽ hình chữ nhật sửa đổi canvas và biểu diễn của nó dưới dạng hình chữ nhật bị hệ thống quên. Nếu vị trí của hình chữ nhật bị thay đổi, khung vẽ sẽ cần được vẽ lại, bao gồm mọi đối tượng có thể đã bị hình chữ nhật che phủ. Trong trường hợp SVG tương đương, người ta có thể chỉ cần thay đổi các thuộc tính vị trí của hình chữ nhật và trình duyệt sẽ xác định cách sơn lại nó. Có các thư viện JavaScript bổ sung trừu tượng hóa mô hình canvas để có các khả năng cảnh giống như svg trong phần tử canvas. Nhiều lớp canvas cũng có thể được sử dụng, nghĩa là chỉ cần tạo lại các lớp cụ thể khi cần thay đổi Hình ảnh SVG được thể hiện bằng XML và các cảnh phức tạp có thể được tạo và duy trì bằng các công cụ chỉnh sửa XML Biểu đồ cảnh SVG cho phép các trình xử lý sự kiện được liên kết với các đối tượng, do đó, một hình chữ nhật có thể phản hồi một sự kiện Về mặt khái niệm, canvas là API cấp thấp hơn để xây dựng các giao diện cấp cao hơn (ví dụ: hỗ trợ SVG). Có các thư viện JavaScript cung cấp triển khai SVG một phần bằng cách sử dụng canvas cho các trình duyệt không cung cấp SVG nhưng hỗ trợ canvas, chẳng hạn như các trình duyệt trong Android 2. x. Tuy nhiên, điều này thường không xảy ra—chúng là các tiêu chuẩn độc lập. Tình huống phức tạp vì có các thư viện đồ thị cảnh cho canvas và SVG có một số chức năng thao tác bitmap Phản ứng[sửa]Vào thời điểm được giới thiệu, phần tử canvas đã vấp phải nhiều phản ứng trái chiều từ cộng đồng tiêu chuẩn web. Đã có những lập luận phản đối quyết định của Apple về việc tạo ra một yếu tố độc quyền mới thay vì hỗ trợ tiêu chuẩn SVG. Có những lo ngại khác về cú pháp, chẳng hạn như không có không gian tên Sở hữu trí tuệ trên canvas[sửa | sửa mã nguồn]Vào ngày 14 tháng 3 năm 2007, nhà phát triển WebKit Dave Hyatt đã chuyển tiếp một email từ Luật sư cấp cao về bằng sáng chế của Apple, Helene Plotka Workman, trong đó tuyên bố rằng Apple bảo lưu tất cả các quyền sở hữu trí tuệ liên quan đến Ứng dụng web của WHATWG 1. 0 Dự thảo làm việc, ngày 24 tháng 3 năm 2005, Mục 10. 1, mang tên “Đồ họa. Canvas bitmap”, nhưng vẫn để ngỏ khả năng cấp phép cho các bằng sáng chế nếu thông số kỹ thuật được chuyển giao cho một cơ quan tiêu chuẩn với chính sách bằng sáng chế chính thức. Điều này gây ra cuộc thảo luận đáng kể giữa các nhà phát triển web và đặt ra câu hỏi liên quan đến việc WHATWG thiếu chính sách về bằng sáng chế so với việc World Wide Web Consortium (W3C) rõ ràng ủng hộ giấy phép miễn phí bản quyền. Apple sau đó đã tiết lộ các bằng sáng chế theo các điều khoản cấp phép bằng sáng chế miễn phí bản quyền của W3C. Tiết lộ có nghĩa là Apple được yêu cầu cung cấp giấy phép miễn phí bản quyền cho bằng sáng chế bất cứ khi nào phần tử Canvas trở thành một phần của đề xuất W3C trong tương lai do nhóm làm việc HTML tạo ra Mối quan tâm về quyền riêng tư[sửa | sửa mã nguồn]Dấu vân tay canvas là một trong số các kỹ thuật lấy dấu vân tay của trình duyệt để theo dõi người dùng trực tuyến, cho phép các trang web xác định và theo dõi khách truy cập bằng phần tử canvas HTML5. Kỹ thuật này đã được đưa tin rộng rãi trên các phương tiện truyền thông vào năm 2014, sau khi các nhà nghiên cứu từ Đại học Princeton và Đại học KU Leuven mô tả nó trong bài báo của họ Web không bao giờ quên. Những lo ngại về quyền riêng tư liên quan đến canvas fingerprinting xoay quanh thực tế là ngay cả việc xóa cookie và xóa bộ nhớ cache cũng không đủ để người dùng tránh bị theo dõi trực tuyến Hỗ trợ trình duyệt[sửa]Phần tử này được hỗ trợ bởi các phiên bản hiện tại của Mozilla Firefox, Google Chrome, Internet Explorer, Safari, Konqueror, Opera và Microsoft Edge Canvas trong mã HTML là gì?HTML Canvas là gì? . Phần tử used to draw graphics, on the fly, via JavaScript. The
Canvas có còn được sử dụng trong HTML không?Phần tử CANVAS được nhúng ngay trong HTML . Các tập lệnh vẽ trên nó nằm trong HTML hoặc trong một tệp bên ngoài được liên kết. Điều này có nghĩa là phần tử CANVAS là một phần của mô hình đối tượng tài liệu (DOM).
Sự khác biệt giữa SVG và canvas HTML là gì?Sự khác biệt giữa SVG và Canvas
. Canvas vẽ đồ họa 2D một cách nhanh chóng (với JavaScript). SVG dựa trên XML, có nghĩa là mọi phần tử đều có sẵn trong SVG DOM. Bạn có thể đính kèm trình xử lý sự kiện JavaScript cho một phần tử. SVG is a language for describing 2D graphics in XML. Canvas draws 2D graphics, on the fly (with a JavaScript). SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.
Canvas có phải là một phần của HTML5 không?Phần tử canvas là một phần của HTML5 và cho phép hiển thị hình dạng 2D và hình ảnh bitmap động, có thể viết thành tập lệnh. Đây là một mô hình thủ tục, cấp thấp, cập nhật một bitmap. |
