Cách tốt nhất để phát hiện rằng HTML5 <canvas> không được hỗ trợ

Cách tiêu chuẩn để xử lý các tình huống trong đó trình duyệt không hỗ trợ <canvas>thẻ HTML5 là nhúng một số nội dung dự phòng như:

<canvas>Your browser doesn't support "canvas".</canvas>

Nhưng phần còn lại của trang vẫn giữ nguyên, có thể không phù hợp hoặc gây hiểu nhầm. Tôi muốn một số cách phát hiện canvas không hỗ trợ để tôi có thể trình bày phần còn lại của trang của mình cho phù hợp. Bạn muốn giới thiệu gì?

Đây là kỹ thuật được sử dụng trong Modernizr và về cơ bản mọi thư viện khác hoạt động canvas:

function isCanvasSupported(){
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
}

Vì câu hỏi của bạn là để phát hiện khi nó không được hỗ trợ, tôi khuyên bạn nên sử dụng nó như vậy:

if (!isCanvasSupported()){ ...

Có hai phương pháp phổ biến để phát hiện hỗ trợ canvas trong trình duyệt:

1. Đề nghị của Matt về việc kiểm tra sự tồn tại củagetContext , cũng được thư viện Modernizr sử dụng theo cách tương tự:

   var canvasSupported = !!document.createElement("canvas").getContext;

2. Kiểm tra sự tồn tại của HTMLCanvasElementgiao diện, như được xác định bởi thông số kỹ thuật WebIDL và HTML . Cách tiếp cận này cũng được đề xuất trong một bài đăng trên blog của nhóm IE 9 .

   var canvasSupported = !!window.HTMLCanvasElement;

Đề xuất của tôi là một biến thể của cái sau (xem Ghi chú bổ sung ), vì một số lý do:

• Mọi trình duyệt được biết đến hỗ trợ canvas - bao gồm IE 9 - thực hiện giao diện này;
• Nó ngắn gọn hơn và rõ ràng ngay lập tức những gì mã đang làm;
• Cách getContexttiếp cận chậm hơn đáng kể trên tất cả các trình duyệt , vì nó liên quan đến việc tạo một phần tử HTML. Điều này không lý tưởng khi bạn cần siết càng nhiều hiệu suất càng tốt (ví dụ trong một thư viện như Modernizr).

Không có lợi ích đáng chú ý khi sử dụng phương pháp đầu tiên. Cả hai cách tiếp cận đều có thể bị giả mạo, nhưng điều này không có khả năng xảy ra do tai nạn.

Ghi chú bổ sung

Có thể vẫn cần kiểm tra xem có thể lấy bối cảnh 2D không. Được biết, một số trình duyệt di động có thể trở thành sự thật cho cả trên séc, nhưng trở lại nullcho .getContext('2d'). Đây là lý do tại sao Modernizr cũng kiểm tra kết quả của .getContext('2d'). Tuy nhiên, WebIDL & HTML - một lần nữa - cung cấp cho chúng tôi một tùy chọn khác tốt hơn, nhanh hơn :

var canvas2DSupported = !!window.CanvasRenderingContext2D;

Lưu ý rằng chúng ta có thể bỏ qua việc kiểm tra hoàn toàn phần tử canvas và chuyển thẳng sang kiểm tra hỗ trợ kết xuất 2D. Các CanvasRenderingContext2Dgiao diện cũng là một phần của đặc tả HTML.

Bạn phải sử dụng getContextphương pháp để phát hiện hỗ trợ WebGL vì mặc dù trình duyệt có thể hỗ trợ WebGLRenderingContextnhưng getContext()có thể trả về null nếu trình duyệt không thể giao tiếp với GPU do sự cố trình điều khiển và không có phần mềm triển khai. Trong trường hợp này, việc kiểm tra giao diện trước tiên cho phép bạn bỏ qua việc kiểm tra getContext:

var cvsEl, ctx;
if (!window.WebGLRenderingContext)
    window.location = "http://get.webgl.org";
else {
    cvsEl = document.createElement("canvas");
    ctx = cvsEl.getContext("webgl") || cvsEl.getContext("experimental-webgl");

    if (!ctx) {
        // Browser supports WebGL, but cannot create the context
    }
}

So sánh hiệu suất

Hiệu suất của getContextphương pháp này chậm hơn 85-90% trong Firefox 11 và Opera 11 và chậm hơn khoảng 55% trong Chromium 18.

Tôi thường chạy một kiểm tra getContextkhi tôi tạo đối tượng canvas của tôi.

(function () {
    var canvas = document.createElement('canvas'), context;
    if (!canvas.getContext) {
        // not supported
        return;
    }

    canvas.width = 800;
    canvas.height = 600;
    context = canvas.getContext('2d');
    document.body.appendChild(canvas);
}());

Nếu nó được hỗ trợ, thì bạn có thể tiếp tục thiết lập canvas và thêm nó vào DOM. Đây là một ví dụ đơn giản về Tăng cường tiến bộ , mà tôi (cá nhân) thích hơn Suy thoái duyên dáng.

Tại sao không thử Modernizr ? Đó là một thư viện JS cung cấp khả năng phát hiện.

Trích dẫn:

Bạn đã bao giờ muốn thực hiện if-statement trong CSS của mình để có sẵn các tính năng thú vị như bán kính đường viền chưa? Chà, với Modernizr bạn có thể hoàn thành điều đó!

try {
    document.createElement("canvas").getContext("2d");
    alert("HTML5 Canvas is supported in your browser.");
} catch (e) {
    alert("HTML5 Canvas is not supported in your browser.");
}

Có thể có một gotcha ở đây - một số khách hàng không hỗ trợ tất cả các phương thức canvas.

var hascanvas= (function(){
    var dc= document.createElement('canvas');
    if(!dc.getContext) return 0;
    var c= dc.getContext('2d');
    return typeof c.fillText== 'function'? 2: 1;
})();

alert(hascanvas)

Bạn có thể sử dụng tập lệnh canisuse.js để phát hiện xem trình duyệt của bạn có hỗ trợ canvas hay không

caniuse.canvas()

Nếu bạn định lấy bối cảnh của khung vẽ, bạn cũng có thể sử dụng nó làm thử nghiệm:

var canvas = document.getElementById('canvas');
var context = (canvas.getContext?canvas.getContext('2d'):undefined);
if(!!context){
  /*some code goes here, and you can use 'context', it is already defined*/
}else{
  /*oof, no canvas support :(*/
}