HTML5 Canvas: 브라우저가 Canvas_html5 튜토리얼 기술을 지원하는지 테스트하는 방법

이 기사는 Steve Fulton 및 Jeff Fulton HTML5 Canvas, 1장, "브라우저가 캔버스를 지원하는지 확인하기 위한 테스트"를 번역한 것입니다.

HTML 페이지에서 Canvas 요소에 대한 참조를 얻은 후 요소에 "컨텍스트"가 포함되어 있는지 테스트해야 합니다. 캔버스의 컨텍스트는 브라우저가 그리기 위해 정의한 평면을 나타냅니다. 간단히 말해서, context가 존재하지 않으면 Canvas는 이름으로만 존재합니다. 브라우저가 Canvas를 지원하는지 테스트하는 방법에는 여러 가지가 있습니다. 첫 번째 방법은 HTML 페이지에 Canvas 요소의 getContext 메소드가 있는지 확인하는 것입니다.

코드 복사

코드는 다음과 같습니다.

if (!theCanvas || !theCanvas.getContext) {
return;
}

실제로 위의 내용은 코드는 두 가지 점을 테스트합니다. 하나는 theCanvas가 false인지 테스트합니다(id가 없으면 document.getElementById()는 false를 반환합니다). 두 번째는 getContext() 함수가 존재하는지 테스트합니다.

위 코드에서는 테스트가 실패하면 return 문이 실행되고 프로그램이 종료됩니다.

또 다른 방법은 Canvas 지원 여부를 결정하는 데 특별히 사용되는 함수를 만드는 것입니다. 이 함수에서는 이러한 결정을 내리기 위해 Canvas 요소가 실시간으로 생성됩니다. 이 방법은 Mark Pilgrim의 HTML5에서 매우 널리 사용됩니다. 이 솔루션 웹사이트 http://diveintohtml5.org에 언급되어 있습니다:

코드 복사

코드는 다음과 같습니다.

function canvasSupport() {
return !!document.createElement('canvas').getContext;
}
function canvasApp() {
if (!canvasSupport( )) {
return;
}
}

우리가 가장 좋아하는 방법은 modernizr.js 라이브러리(http://www.modernizr.com에서 찾을 수 있음)를 사용하는 것입니다. Modernizr는 다양한 웹 기술의 호환성을 테스트하기 위한 간단하고 사용하기 쉬운 경량 JavaScript 라이브러리입니다. 이는 현재 Canvas가 지원되는지 테스트하는 데 사용할 수 있는 많은 정적 부울 메서드를 제공합니다.

modernizr을 HTML 페이지에 도입하는 것은 매우 간단합니다. http://www.modernizr.com에서 코드를 다운로드한 다음 HTML 페이지에 다음 외부 js 파일을 포함합니다.

코드 복사

코드는 다음과 같습니다.

> ;

Modernizr을 사용하여 Canvas 지원을 테스트하고 위의 canvasSupport 함수를 변경하세요.

코드 복사

코드는 다음과 같습니다.

function canvasSupport() {
return Modernizr.canvas;
}

브라우저가 Canvas를 지원하는지 확인하려면 Modernizr.js를 사용하는 것이 가장 좋은 솔루션이라고 생각합니다.