วิธีที่ดีที่สุดในการตรวจสอบว่า HTML5 <canvas> ไม่รองรับ

วิธีมาตรฐานในการจัดการกับสถานการณ์ที่เบราว์เซอร์ไม่สนับสนุน<canvas>แท็กHTML5 คือการฝังเนื้อหาทางเลือกเช่น:

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

แต่ส่วนที่เหลือของหน้ายังคงเหมือนเดิมซึ่งอาจไม่เหมาะสมหรือทำให้เข้าใจผิด ฉันต้องการตรวจจับการไม่สนับสนุนผืนผ้าใบบางอย่างเพื่อให้ฉันสามารถนำเสนอส่วนที่เหลือของหน้าเว็บของฉันตามนั้น คุณจะแนะนำอะไร

นี่คือเทคนิคที่ใช้ใน Modernizr และโดยทั่วไปแล้วห้องสมุดอื่น ๆ ที่ทำงานผ้าใบ:

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

เนื่องจากคำถามของคุณสำหรับการตรวจจับเมื่อไม่ได้รับการสนับสนุนฉันขอแนะนำให้ใช้เช่น:

if (!isCanvasSupported()){ ...

มีสองวิธียอดนิยมในการตรวจหาการสนับสนุน Canvas ในเบราว์เซอร์:

1. ข้อเสนอแนะของ Matt ในการตรวจสอบการมีอยู่ของgetContextยังใช้ในลักษณะที่คล้ายกันโดยห้องสมุด Modernizr:

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

2. การตรวจสอบการดำรงอยู่ของHTMLCanvasElementอินเตอร์เฟซที่กำหนดโดยWebIDLและHTMLข้อกำหนด วิธีการนี้ยังได้รับการแนะนำในบล็อกโพสต์จากทีม IE 9

   var canvasSupported = !!window.HTMLCanvasElement;

คำแนะนำของฉันคือการเปลี่ยนแปลงในภายหลัง (ดูหมายเหตุเพิ่มเติม ) ด้วยเหตุผลหลายประการ:

• เบราว์เซอร์ทุกตัวที่รู้จักกันดีซึ่งสนับสนุนแคนวาส - รวมถึง IE 9 - ใช้ส่วนต่อประสานนี้
• มันกระชับและชัดเจนในทันทีว่าโค้ดกำลังทำอะไรอยู่
• getContextวิธีการเป็นอย่างช้าเบราว์เซอร์ทั้งหมดเพราะมันเกี่ยวข้องกับการสร้างองค์ประกอบ HTML สิ่งนี้ไม่เหมาะเมื่อคุณต้องการบีบประสิทธิภาพให้มากที่สุดเท่าที่จะทำได้ (ในไลบรารีเช่น Modernizr เป็นต้น)

ไม่มีประโยชน์ที่เห็นได้ชัดเจนในการใช้วิธีแรก ทั้งสองวิธีสามารถปลอมแปลงได้ แต่สิ่งนี้ไม่น่าจะเกิดขึ้นโดยบังเอิญ

หมายเหตุเพิ่มเติม

อาจยังจำเป็นต้องตรวจสอบว่าสามารถดึงบริบท 2D ได้ ข่าวบางเบราว์เซอร์มือถือสามารถกลับจริงสำหรับการตรวจสอบทั้งสองข้างต้น แต่กลับสำหรับnull .getContext('2d')นี่คือเหตุผลที่ Modernizr ตรวจสอบผลลัพธ์.getContext('2d')ด้วย อย่างไรก็ตาม WebIDL & HTML - อีกครั้ง - ช่วยให้เรามีตัวเลือกที่ดีกว่าและเร็วกว่า :

var canvas2DSupported = !!window.CanvasRenderingContext2D;

โปรดสังเกตว่าเราสามารถข้ามการตรวจสอบองค์ประกอบ Canvas ทั้งหมดและตรงไปที่การตรวจสอบการสนับสนุนการเรนเดอร์ 2D CanvasRenderingContext2Dอินเตอร์เฟซที่เป็นส่วนหนึ่งของข้อกำหนด HTML

คุณต้องใช้getContextวิธีการสำหรับการตรวจสอบ WebGLสนับสนุนเนื่องจากแม้ว่าเบราว์เซอร์อาจสนับสนุนWebGLRenderingContext, getContext()อาจจะกลับnullถ้าเบราว์เซอร์ไม่สามารถที่จะติดต่อกับ GPU เนื่องจากปัญหาคนขับและไม่มีการใช้งานซอฟต์แวร์ ในกรณีนี้การตรวจสอบอินเทอร์เฟซก่อนให้คุณข้ามการตรวจสอบสำหรับ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
    }
}

การเปรียบเทียบประสิทธิภาพ

ประสิทธิภาพของการ getContextวิธีการนั้นช้ากว่า 85-90% ใน Firefox 11 และ Opera 11 และช้ากว่า 55% ใน Chromium 18

ฉันมักจะเรียกใช้การตรวจสอบgetContextเมื่อฉันสร้างวัตถุผ้าใบของฉัน

(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);
}());

หากได้รับการสนับสนุนคุณสามารถดำเนินการตั้งค่า Canvas ต่อไปและเพิ่มเข้าใน DOM นี่เป็นตัวอย่างง่าย ๆ ของProgressive Enhancement Enhancementซึ่ง I (ส่วนตัว) ชอบมากกว่าความเสื่อมโทรมที่สง่างาม

ทำไมไม่ลองmodernizr ? มันเป็นห้องสมุด JS ที่ให้ความสามารถในการตรวจจับ

อ้างถึง:

คุณเคยต้องการที่จะทำ if-statement ใน CSS ของคุณสำหรับความพร้อมของคุณสมบัติที่ยอดเยี่ยมเช่นรัศมีเส้นขอบหรือไม่? ด้วย Modernizr คุณสามารถทำเช่นนั้นได้!

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.");
}

อาจมี gotcha ที่นี่ - ลูกค้าบางคนไม่สนับสนุนวิธีการวาดภาพทั้งหมด

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)

คุณสามารถใช้สคริปต์canisuse.jsเพื่อตรวจสอบว่าเบราว์เซอร์ของคุณรองรับ canvas หรือไม่

caniuse.canvas()

หากคุณจะได้รับบริบทของผืนผ้าใบของคุณคุณอาจใช้มันเป็นแบบทดสอบ:

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 :(*/
}