HTML5 <canvas>가 지원되지 않음을 감지하는 가장 좋은 방법

브라우저가 HTML5 <canvas>태그를 지원하지 않는 상황을 처리하는 표준 방법 은 다음과 같은 대체 컨텐츠를 포함시키는 것입니다.

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

그러나 나머지 페이지는 동일하게 유지되므로 부적절하거나 오해의 소지가 있습니다. 지원되지 않는 캔버스를 감지하여 나머지 페이지를 적절하게 표시 할 수있는 방법을 원합니다. 어떤 것을 권 하시죠?

이것은 Modernizr과 기본적으로 캔버스가 작동하는 다른 모든 라이브러리에서 사용되는 기술입니다.

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

귀하의 질문은 지원 되지 않는 경우 감지에 대한 것이기 때문에 다음과 같이 사용하는 것이 좋습니다.

if (!isCanvasSupported()){ ...

브라우저에서 캔버스 지원을 감지하는 데 널리 사용되는 두 가지 방법이 있습니다.

1. 의 존재 여부를 확인하는 Matt의 제안 은 getContextModernizr 라이브러리와 비슷한 방식으로 사용됩니다.

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

2. WebIDL 및 HTML 사양에 HTMLCanvasElement정의 된대로 인터페이스가 있는지 확인합니다 . 이 방법은 IE 9 팀의 블로그 게시물 에서도 권장되었습니다 .

   var canvasSupported = !!window.HTMLCanvasElement;

내 추천은 몇 가지 이유로 후자의 변형입니다 ( 추가 참고 사항 참조 ).

• IE 9를 포함한 캔버스를 지원하는 모든 알려진 브라우저는이 인터페이스를 구현합니다.
• 코드가하는 일이 더 간결하고 즉각적입니다.
• 이 getContext접근 방식은 HTML 요소를 생성하기 때문에 모든 브라우저 에서 상당히 느립니다 . 예를 들어 Modernizr와 같은 라이브러리에서 가능한 한 많은 성능을 압축해야하는 경우에는 적합하지 않습니다.

첫 번째 방법을 사용하면 눈에 띄는 이점이 없습니다. 두 방법 모두 스푸핑 될 수 있지만 우연히 발생할 가능성은 없습니다.

추가 사항

2D 컨텍스트를 검색 할 수 있는지 확인해야 할 수도 있습니다. 보도에 따르면 일부 모바일 브라우저는 위의 두 가지 검사 모두에 대해 true를 반환하지만에 대해 반환 null할 수 .getContext('2d')있습니다. 이것이 Modernizr이의 결과를 확인하는 이유입니다 .getContext('2d'). 그러나 WebIDL 및 HTML - 다시 - 우리에게 또 다른 더 나은, 제공 빠른 옵션 :

var canvas2DSupported = !!window.CanvasRenderingContext2D;

캔버스 요소 검사를 완전히 건너 뛰고 바로 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접근 방식의 성능은 Firefox 11 및 Opera 11에서 85-90 % 느리고 Chromium 18에서는 약 55 % 느립니다.

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

지원되는 경우 캔버스 설정을 계속하고 DOM에 추가 할 수 있습니다. 이것은 개인적으로 Graceful Degradation보다 선호하는 Progressive Enhancement 의 간단한 예입니다 .

왜하지 않으려 고 모더 나이저를 ? 감지 기능을 제공하는 JS 라이브러리입니다.

인용문:

국경 반경과 같은 멋진 기능을 사용할 수 있도록 CSS에서 if 문을 만들고 싶었던 적이 있습니까? 글쎄, 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.");
}

여기에 문제가있을 수 있습니다. 일부 클라이언트는 모든 캔버스 메서드를 지원하지 않습니다 .

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 스크립트를 사용 하여 브라우저가 캔버스를 지원하는지 여부를 감지 할 수 있습니다

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