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

집

웹 프론트엔드

H5 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:47 PM

이 기사는 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 파일을 포함합니다.

코드 복사

코드는 다음과 같습니다.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7378

자바 튜토리얼

1628

Cakephp 튜토리얼

1357

라라벨 튜토리얼

1267

PHP 튜토리얼

1216

Related knowledge

내 HTML5 웹 사이트에 오디오를 추가하는 방법은 무엇입니까? Mar 10, 2025 pm 03:01 PM

이 기사는 & lt; audio & gt를 사용하여 HTML5에 오디오를 포함시키는 방법을 설명합니다. 형식 선택에 대한 모범 사례 (MP3, OGG Vorbis), 파일 최적화 및 재생에 대한 JavaScript 컨트롤을 포함한 요소. 다중 오디오를 사용하는 것을 강조합니다

Geolocation API로 사용자 위치 개인 정보 및 권한을 어떻게 처리합니까? Mar 18, 2025 pm 02:16 PM

이 기사는 지리적 위치 API를 사용하여 사용자 위치 개인 정보 및 권한 관리, 권한 요청, 데이터 보안 보장 및 개인 정보 보호법 준수에 대한 모범 사례를 강조하는 것에 대해 설명합니다.

사용자 입력에 HTML5 양식을 사용하는 방법은 무엇입니까? Mar 10, 2025 pm 02:59 PM

이 기사에서는 HTML5 양식을 작성하고 검증하는 방법을 설명합니다. 그것은 & lt; form & gt; 요소, 입력 유형 (텍스트, 이메일, 번호 등) 및 속성 (필수, 패턴, 최소, 최대). HTML5의 장점은 오래된 방법에 비해 형성됩니다

HTML5 페이지 가시성 API를 사용하여 페이지가 표시되는시기를 감지하려면 어떻게합니까? Mar 13, 2025 pm 07:51 PM

이 기사에서는 HTML5 페이지 가시성 API를 사용하여 페이지 가시성을 감지하고 사용자 경험을 향상 시키며 리소스 사용량을 최적화하는 것에 대해 설명합니다. 주요 측면에는 미디어 일시 정지, CPU 부하 감소 및 가시성 변경에 기반한 분석 관리가 포함됩니다.

뷰포트 메타 태그를 사용하여 모바일 장치에서 페이지 스케일링을 제어하려면 어떻게합니까? Mar 13, 2025 pm 08:00 PM

이 기사에서는 Viewport Meta 태그를 사용하여 모바일 장치의 페이지 스케일링을 제어하여 폭과 최적의 응답 성 및 성능을위한 초기 스케일과 같은 설정에 중점을 둡니다. character count : 159

HTML5 및 JavaScript로 대화 형 게임을 만드는 방법은 무엇입니까? Mar 10, 2025 pm 06:34 PM

이 기사는 JavaScript를 사용하여 대화식 HTML5 게임을 만드는 자세한 내용입니다. 게임 디자인, HTML 구조, CSS 스타일, JavaScript 로직 (이벤트 처리 및 애니메이션 포함) 및 오디오 통합을 다룹니다. 필수 JavaScript 라이브러리 (Phaser, PI