Cổng Khoa học Máy tính dành cho những người yêu thích máy tính. Nó bao gồm các bài báo về khoa học máy tính và lập trình được viết tốt, tư duy tốt và được giải thích tốt, các câu đố và thực hành / lập trình cạnh tranh / các câu hỏi phỏng vấn công ty.

Bạn đang xem : trình duyệt của bạn không hỗ trợ thẻ canvas html5

Làm cách nào để phát hiện HTML 5 được hỗ trợ hay không trong trình duyệt?

HTML 5 là tiêu chuẩn mới nhất của HTML bao gồm nhiều thay đổi và tính năng mới. Hỗ trợ HTML 5 có thể được phát hiện bằng cách sử dụng ba phương pháp:
Phương pháp 1: Kiểm tra hỗ trợ Vị trí địa lý: API Vị trí địa lý đã được thêm vào HTML5. Nó được sử dụng để xác định vị trí của người dùng. Có thể phát hiện sự hiện diện của API này bằng cách kiểm tra xem thuộc tính vị trí địa lý có trong đối tượng điều hướng hay không. Điều này được thực hiện bằng cách sử dụng Navigator.geolocation trả về đối tượng Vị trí địa lý. Nếu đối tượng tồn tại, điều đó có nghĩa là HTML5 được trình duyệt hỗ trợ.
Ví dụ:

html

< p class = "ring-load" id = "run-and-edit-loader">

< / p>

& lt;! DOCTYPE html & gt;

& lt; html & gt;

& lt; head & gt;

& lt; title & gt;

Cách phát hiện HTML 5 được hỗ trợ

hoặc không có trong trình duyệt?

& lt; / title & gt;

& lt; / head & gt;

& lt; body & gt;

& lt; < code class = "keyword"> h1 style = "color: green " & gt;

GeeksforGeeks

& lt; / h1 & gt;

& lt; b & gt;

Cách phát hiện hỗ trợ HTML5

trong trình duyệt?

& lt; / b & gt;

< p class = "line number22 index21 alt1"> & lt; p & gt;

Các tính năng định vị được thêm vào HTML5.

Kiểm tra hỗ trợ Vị trí địa lý.

& lt; / p < code class = "trơn"> & gt;

& lt; p & gt;

Nhấp vào nút để kiểm tra

để hỗ trợ Vị trí địa lý

& lt; / p & gt;

< / p>

& lt; < / code> p & gt;

Định vị được hỗ trợ:

& lt; span class = "output" & gt; & lt; / span & gt;

& lt; / p & gt;

< / p>

& lt; bu tton onclick = "checkGeolocation ()" & gt;

Kiểm tra Vị trí địa lý

& lt; / nút & gt;

< / code>

& lt; script type = " text / javascript " & gt;

function checkGeolocation () {

if (Navigator.geolocation)

isSupported = true;

khác

isSupported = false; < / p>

document.querySelector ('. output'). textContent

= isSupported;

}

& lt; / script & gt;

& lt; / body & gt;

& lt; / < / code> html & gt;

 
 

Đầu ra:

  • Trước khi nhấp vào nút:

  • Sau khi nhấp vào nút:

Phương pháp 2: Kiểm tra phần tử canvas: Phần tử canvas được sử dụng để hiển thị các hình dạng hoặc phần tử bitmap. Đây là một tính năng mới được thêm vào trong HTML5.
Phần tử canvas có phương thức getContext () được sử dụng để trả về ngữ cảnh bản vẽ của phần tử canvas. Nó trả về giá trị null nếu mã định danh ngữ cảnh không được hỗ trợ. Thuộc tính này có thể được sử dụng để kiểm tra xem phần tử canvas có được hỗ trợ hay không.
Một phần tử canvas mới được tạo bằng phương thức document.createElement (). Phương thức getContext được kiểm tra bằng cách truy cập nó trên đối tượng đầu vào đã tạo. Kết quả của biểu thức này được kiểm tra bằng câu lệnh if. Nếu kết quả là true, điều đó có nghĩa là HTML5 được trình duyệt hỗ trợ.
Ví dụ:

html

& lt;! DOCTYPE html & gt;

& lt; html & gt;

& lt; head & gt;

& lt; title & gt;

Cách phát hiện HTML 5 được hỗ trợ

hay không có trong trình duyệt?

& lt; / title & gt;

& lt; / head & gt;

& lt; body & gt;

< code class = "trơn"> & lt; h1 style = "color: green" & gt;

GeeksforGeeks

& lt; / h1 & gt;

& lt; b & gt;

Cách phát hiện đó là HTML5

không được JavaScript hỗ trợ?

< p class = "line number19 index18 alt2"> & lt; / b & gt;

& lt; p & gt;

Các tính năng Canvas được thêm vào HTML5. Kiểm tra

để hỗ trợ canvas trong HTML5.

& lt; / p & gt;

& lt; p & gt;

Nhấp vào nút để kiểm tra

để hỗ trợ Canvas

& lt; / p & gt;

& lt; p & gt;

< code class = "trơn"> Canvas được hỗ trợ:

& lt; span class = "output" & gt; & lt; / span & gt ;

& lt; / p & gt;

& lt; nút onclick = < code class = "string"> "checkCanvas ()" & gt;

Kiểm tra canvas

& lt; / nút & gt;

& lt; script nhập = "text / javascript" & gt; < / p>

function checkCanvas () {

if (document.createElement ('canvas'). getContext)

isSupported = true;

else

isSupported = false ;

document.querySelector ('. output'). textContent

< code class = "undefined space"> = isSupported;

}

& lt; / script & gt;

& lt; / body & gt;

< code class = "trơn"> & lt; / html & gt;

 
 

Đầu ra:

  • Trước khi nhấp vào nút:

  • Sau khi nhấp vào nút:

< p> Phương pháp 3: Kiểm tra các kiểu nhập văn bản: HTML5 đã giới thiệu các kiểu đầu vào mới có thể được sử dụng để nhập các dạng dữ liệu khác nhau với xác thực. Phần tử đầu vào trước HTML5 không hỗ trợ các loại mới này và việc sử dụng chúng sẽ tự động hoàn nguyên về loại "văn bản" mặc định. Điều này có thể được sử dụng để kiểm tra xem trình duyệt có hỗ trợ HTML5 hay không.
Một phần tử đầu vào mới được tạo bằng phương thức document.createElement (). Sau đó, phương thức setAttribute được sử dụng trên phần tử đã tạo để đặt kiểu đầu vào thành bất kỳ kiểu đầu vào nào mới hơn. Loại phần tử này được kiểm tra bằng cách sử dụng câu lệnh if để xem liệu nó có khớp với giá trị ‘văn bản’ mặc định hay không. Nếu giá trị không hoàn nguyên về cài đặt mặc định, điều đó có nghĩa là HTML5 được trình duyệt hỗ trợ.
Ví dụ:

html

& lt;! DOCTYPE html & gt;

& lt; html & gt;

< p class = "line number3 index2 alt2">

& lt; head & gt;

& lt; title & gt;

Cách phát hiện HTML 5 được hỗ trợ

hay không có trong trình duyệt?

& lt; / title & gt;

& lt; / head & gt; < / p>

& lt; body & gt;

& lt; h1 style = "color: green" & gt;

GeeksforGeeks

& lt; / h1 & gt ;

& lt; b & gt;

Cách phát hiện hỗ trợ HTML5

trong trình duyệt?

& lt; / b & gt; < / code>

& lt; p & gt;

Loại đầu vào mới là một trong những tính năng

được thêm vào trong HTML5. & lt; br & gt;

Kiểm tra kiểu nhập mới

có nghĩa là HTML5 được hỗ trợ.

< / code> & lt; / p & gt;

< p class = "line number28 index27 alt1">

& lt; p & gt;

Nhấp vào nút để kiểm tra xem

các kiểu nhập mới được hỗ trợ

< code class = "undefined space"> & lt; / p & gt;

& lt; p & gt;

Các kiểu nhập liệu mới được hỗ trợ:

& lt; span class = "output" & gt; & lt; / span & gt;

& lt; / < code class = "keyword"> p & gt;

& lt; nút onclick = "checkInputType ()" & gt;

Kiểm tra các loại đầu vào

& lt; / nút & gt;

& lt; script loại = " text / javascript " & gt;

function checkInputType () {

let tempElement = document.createElement ("input");

tempElement.setAttribute ("type", "color");

// Kiểm tra xem thuộc tính type có lùi lại không

// sang kiểu văn bản mặc định

if (tempElement .type! == "text")

isSupported = true;

else

isSupported = false;

document.querySelector ('. output'). textContent < / p>

= isSupported;

}

& lt; / script & gt; < / code>

& lt; / body & gt;

& lt; / html & gt;

 
 

Đầu ra:

  • Trước khi nhấp vào nút:

  • Sau khi nhấp vào nút:

Ghi chú Cá nhân của tôi


Xem thêm những thông tin liên quan đến chủ đề trình duyệt của bạn không hỗ trợ thẻ canvas html5

HTML5 Canvas Tutorial: 2D rendering context #1

alt

  • Tác giả: Easy Learn Tutorial
  • Ngày đăng: 2012-11-29
  • Đánh giá: 4 ⭐ ( 8732 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: This HTML 5 tutorial will walk you through how to get access to the drawing context in two different ways. One is by using HTML 5 tags, getting a pointer to it through Javascript's document.getElementById, and the other method is creating a canvas element directly in Javascript. The video also helps you learn how to resize canvas HTML5 style. That means the CSS attributes for width and height do not affect the rendering context's pixel data array dimensions, though it does indeed change the appearance of any and all HTML 5 tags.

    For more HTML 5 tutorial videos, check out the complete playlist at http://www.youtube.com/playlist?list=PLGJDCzBP5j3xua7wZxIN-AJGvIwPdZ_eX

    Other links of interest:
    -- Our YouTube channel http://www.youtube.com/user/easylearntutorial
    -- Visit our website http://www.easylearntutorial.com for more text and video tutorials, updates, and upcoming tutorial articles and events
    -- Like us on Facebook http://www.facebook.com/easylearntutorialonline
    -- Follow us on Twitter http://www.twitter.com/easylearntuts

Canvas trong HTML5

  • Tác giả: vietjack.com
  • Đánh giá: 3 ⭐ ( 7177 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Canvas trong HTML5 - Học HTML5 cơ bản và nâng cao theo các bước đơn giản và dễ dàng với các ví dụ qua các chương hướng dẫn gồm 2D Canvas, Audio, Video, Các phần tử Semantic mới, Geolocation, Kho lưu Web, Local Storage vĩnh viễn, Kho lưu Local vĩnh viễn, Web Storage, Web SQL, Forms 2.0, Microdata và hoạt động kéo và thả, hoạt động Drag và Drop.

Thẻ canvas trong HTML

  • Tác giả: freehost.page
  • Đánh giá: 3 ⭐ ( 5229 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Giới thiệu về Canvas trong HTML5

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 9522 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: HTML5 Canvas là gì?

Canvas trong HTML5

  • Tác giả: webvn.com
  • Đánh giá: 4 ⭐ ( 8571 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thông qua bài, bạn sẽ biết định nghĩa canvas là gì? Các phương thức để vẽ hình lên canvas và ví dụ minh họa.

Thẻ trong HTML5

  • Tác giả: hoc.tv
  • Đánh giá: 4 ⭐ ( 4195 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ trong HTML5
    Tag được dùng để hiển thị đồ họa.

Xem thêm các bài viết khác thuộc chuyên mục: WordPress

XEM THÊM  Các trang trong WordPress: Cách tạo và thêm trang - cách sử dụng các trang trong wordpress

By DEVTEAM