Canvas Javascript API가 주요 브라우저에서 작동하는 방식

캔버스 JavaScript API는 웹에서 그래픽을 만들고 조작하기 위한 강력한 도구입니다. JavaScript 코드를 사용하여 2D 그래픽을 그릴 수 있으며 대부분의 최신 웹 브라우저에서 지원됩니다. 게임 운영, 애니메이션, 비디오 처리 등은 모두 Canvas API에서 제공됩니다.

캔버스 API는 HTML 문서에 배치할 수 있는 HTML 요소인 캔버스 요소의 형태로 구현됩니다. 캔버스 요소는 그리기 화면 역할을 하며 CSS를 사용하여 스타일을 지정하고 위치를 지정할 수 있습니다.

캔버스에 그래픽을 그리려면 arc, lineTo 및 fillRect와 같은 캔버스 API의 그리기 메서드를 사용할 수 있습니다. 이러한 방법을 사용하면 캔버스에 모양, 선 및 기타 그래픽을 그릴 수 있습니다.

캔버스 API에 대한 브라우저 지원

Google Chrome과 Mozilla Firefox는 Canvas API를 지원하는 주요 브라우저입니다. Canvas API와 함께 Safari 또는 Microsoft Edge를 사용하지 마십시오. 캔버스 API는 Internet Explorer를 제외한 모든 주요 브라우저에서 지원됩니다.

Canvas는 Windows, Linux, Mac, Android, iOS 및 모든 주요 브라우저에서 작동합니다. 운영 체제는 캔버스 API가 제대로 작동하는지 확인하기 위해 모든 보안 검사와 업그레이드를 수행해야 합니다. 다음은 해당 브라우저와 해당 버전의 목록입니다.

• 크롬

• Firefox, 확장 버전은 지원되지 않습니다

• 엣지

• Respondus Lockdown 브라우저는 최신 시스템 요구사항만 지원합니다.

• Macintosh 전용 Safari

캔버스 API를 사용하려면 RAM이 1GB 이상인 시스템이 적합합니다. 기본 모바일 브라우저는 태블릿 장치에 대한 지원이 적습니다. 기본 Android 브라우저는 모바일 장치에 따라 변경됩니다.

모바일 브라우저

iOS

Safari는 기본 브라우저이며 Canvas에 대한 지원이 제한되어 있습니다.

크롬

Photon Flash Player는 Flash를 지원합니다

안드로이드

• Chrome은 기본 브라우저이며 Canvas

에 대한 지원이 제한되어 있습니다.

• 파이어폭스

스크린 리더

• Safari 최신 버전의 Macintosh VoiceOver

• 최신 버전의 Firefox에서 PC용 JAWS

• PC NNVDA(최신 버전의 Firefox)

Chrome은 캔버스에서 스크린 리더를 지원하지 않습니다.

캔버스 API 브라우저 지원 코드 감지

캔버스는 HTML 5 요소입니다. 캔버스의 getContext() 메서드는 그리기 컨텍스트를 반환합니다. null이 반환되면 캔버스 요소가 지원되지 않는다는 의미입니다.

사용자는 아래 구문을 따르고 아래 코드를 사용하여 브라우저가 캔버스 요소를 지원하는지 확인할 수 있습니다.

문법

으아악

구문의 if 조건은 캔버스 요소를 생성하고 컨텍스트를 가져오려고 시도합니다. 컨텍스트가 반환되면 브라우저는 캔버스를 지원합니다.

예

이 프로그램에서 사용자는 버튼을 클릭하여 캔버스에 대한 브라우저 지원을 확인할 수 있습니다. 버튼을 클릭하면 이벤트가 위 구문을 사용하여 캔버스 컨텍스트를 가져오려는 함수를 호출합니다. 프로그램에는 브라우저 지원을 구별하고 사용자에게 메시지를 표시하는 플래그 변수가 있습니다.

으아악

예

다음은 캔버스 API를 사용하여 캔버스에 간단한 원을 그리는 방법의 예입니다. -

으아악

이 예에서 캔버스 요소는 ID가 "myCanvas"이고 너비와 높이가 각각 200픽셀과 100픽셀로 생성됩니다. getContext 메소드는 캔버스의 그리기 컨텍스트를 얻는 데 사용되며, arc 메소드는 중심점이 (95, 50)이고 반경이 40픽셀인 원을 그리는 데 사용됩니다. 그런 다음 스트로크 방법을 사용하여 캔버스에 원을 그립니다.

이 튜토리얼은 Canvas API가 모든 주요 브라우저에 내장된 기본 부분인지 이해하는 데 도움이 됩니다. 모든 주요 브라우저에 캔버스 API가 내장되어 있는 것은 아닙니다. 이제 우리는 캔버스 API에 대한 브라우저 지원을 감지하는 코드를 알고 있습니다. 사용자는 확인을 위해 이 코드 조각에서 지원되는 이전 브라우저를 사용하여 캔버스를 코딩할 때 오류를 피할 수 있습니다.

위 내용은 Canvas Javascript API가 주요 브라우저에서 작동하는 방식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!