캔버스 사용 방법

캔버스 사용 방법: 먼저 대상 위치 지정을 위해 DOM(문서 개체 모델)을 사용한 다음 id 속성을 사용하여 일치하는 대상 위치를 식별하고 마지막으로 캔버스에 그래픽을 그립니다.

이 문서의 운영 환경: Windows 7 시스템, Dell G3 컴퓨터, HTML5&&CSS3 버전.

Canvas는 JavaScript 프로그래밍 언어를 사용하여 쉽고 강력한 그래픽 그리기를 가능하게 하는 HTML5 요소이며 개발자는 이를 사용하여 풍부한 웹 애플리케이션을 만드는 것을 좋아합니다. 사용자는 Adobe의 Flash Player와 같은 독점 브라우저 플러그인을 사용하지 않고도 이러한 애플리케이션을 사용할 수 있습니다.

캔버스 요소의 사용법을 자세히 살펴보겠습니다.

캔버스 요소는 그래픽의 컨테이너로만 사용될 수 있으므로 그래픽을 렌더링하려면 JavaScript를 사용해야 합니다.

캔버스에 그래픽을 그릴 때 먼저 대상 위치 지정을 위해 DOM(문서 개체 모델)을 사용해야 합니다. 또한 id 속성을 사용하면 일치하는 대상 위치를 식별하는 데 도움이 됩니다.

캔버스 요소

<canvas width="320" height="160" id="canvasExample"></canvas>

의 코드를 살펴보겠습니다. 캔버스 요소는 너비와 높이라는 두 가지 특정 속성을 허용합니다.

이 두 속성에 대한 값을 제공하지 않으면 캔버스는 너비에 300픽셀, 높이에 150픽셀의 기본값을 사용합니다.

ID 속성은 JavaScript 코드에서 Canvas 요소를 식별하는 데 사용됩니다.

처음에는 5ba626b379994d53f7acf72a64f9b697 요소가 비어 있습니다. 따라서 무언가를 표시하려면 JavaScript 스크립트가 그리기 전에 렌더링 컨텍스트를 얻어야 합니다.

캔버스 요소에는 getContext라는 내장 DOM 메서드가 있습니다. 렌더링 컨텍스트와 해당 그리기 메서드에 액세스하는 데 사용되는 JavaScript 함수입니다.

이 함수는 일반적으로 2D 그래픽 컨텍스트("2d"로 정의됨)인 단일 인수를 허용합니다.

예를 들어 캔버스에 직사각형 모양을 만들려면 다음 속성과 함수가 필요합니다.

fillStyle = " color" - 직사각형의 경우 색상을 추가합니다.

fillRect(x,y,width,height) - 채워진 직사각형을 그립니다.

strokRect(x,y,width,height) - 직사각형에 윤곽선을 제공합니다.

clearRect(x,y,width,height) - 지웁니다. 지정된 직사각형 섹션을 완전히 투명하게 만듭니다.

좌표를 정의하려면 캔버스 그리드 또는 좌표계를 사용하세요. 원본 크기는 캔버스 영역의 왼쪽 상단 모서리에 있으며 좌표는 (0,0)입니다.

그래서 X좌표는 오른쪽으로 이동하고 Y좌표는 아래로 이동하게 됩니다. 거리는 픽셀 단위입니다.

x는 왼쪽 위에서 오른쪽 위로 가로 위치를 제공합니다.

y는 왼쪽 위에서 아래로 세로 위치를 제공합니다.

width는 직사각형의 너비를 제공합니다.

height는 직사각형의 높이를 제공합니다.

구체적인 코드는 다음과 같습니다. 브라우저의 표시 효과는 다음과 같습니다. 이 함수는 150 x 250 픽셀 직사각형을 생성합니다.

그런 다음 ClearRect() 함수는 중앙에서 100 x 50 픽셀 직사각형을 제거합니다.

마지막으로, 스트로크Rect () 함수는 지워진 영역 내에 75 x 20 픽셀 직사각형을 구성합니다

위 내용은 캔버스 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!