HTML5 및 캔버스의 일반적인 특성의 새로운 기능을 구성하십시오.

이 기사는 주로 HTML5의 새로운 기능과 캔버스의 공통 특성 분류를 소개합니다. Canvas API는 HTML5에서 그래픽을 그리는 데 사용되는 중요한 컨텐츠입니다. 필요한 친구는 다음 1을 참조 할 수 있습니다. HTML5 컨텐츠 유형

힌트

Selectors API는 편리하지 않습니다. DOM을 통과 할 때 Selectors API는 일반적으로 이전 하위 노드 검색 API보다 빠릅니다. 빠른 스타일 시트를 구현하기 위해 브라우저는 선택기 일치를 높이 최적화합니다.

캔버스는 본질적으로 비트 맵 캔버스이며, 그 그래픽이 그려진 그래픽을 확장 할 수 없으며 SVG 이미지처럼 확대되고 축소 될 수 없습니다. 또한 캔버스로 그려진 객체는 페이지 DOM 구조 또는 네임 스페이스에 속하지 않습니다.

캔버스로 프로그래밍하면 먼저 컨텍스트를 얻어야합니다. 그런 다음 상황에서 작업을 실행하고 마지막으로 이러한 작업을 맥락에 적용하십시오.

캔버스의 좌표는 왼쪽 상단 모서리에서 시작되며 x 축은 수평 방향 (픽셀)으로 오른쪽으로 확장되고 y 축은 수직 방향으로 확장됩니다. 왼쪽 상단 코너 x = 0 및 Y-0의 좌표가있는 포인트를 원점이라고합니다.

대부분의 HTML 요소와 마찬가지로 캔버스 요소는 CSS를 적용하고 내부 마진, 외부 여백 등을 적용하여 테두리를 추가 할 수 있으며 일부 CSS 속성은 캔버스의 요소에 의해 상속 될 수 있습니다.

수정 - 도면 시스템에서 명령문은 변환입니다. 적용될 때 의지에 따라 순차적으로, 결합 또는 수정 될 수 있습니다. 각 드로잉 작동의 결과는 캔버스에 표시되기 전에 보정층을 통해 수정해야합니다. 이로 인해 복잡성이 추가되지만 드로잉 시스템에 더 강력한 기능을 추가하여 현재 주류 이미지 편집 도구와 같은 실시간 이미지 처리를 지원할 수 있으므로 API 내 컨텐츠 의이 부분의 복잡성이 필요합니다.

재사용 가능한 코드에 대한 중요한 제안이 있습니다. 일반적으로 도면은 원점 (좌표계의 0,0 포인트)에서 시작하여 변환 (스케일링, 번역, 회전 등)에서 시작한 다음 원하는 효과가 달성 될 때까지 코드를 지속적으로 수정해야합니다.

컨텍스트 경로 함수

(1) Moveto (x, y) : 그리지 않고 현재 위치를 새 대상 좌표 (x, y)로 이동하십시오.

(2) Lineto (x, y) : 현재 위치를 새 대상 좌표 (x, y)로 이동할뿐만 아니라 두 좌표 사이에 직선을 그립니다.

(3) ClosePath () :이 함수의 동작은 Lineto와 매우 유사합니다. 유일한 차이점은 ClosePaht가 경로의 시작 좌표를 대상 좌표로 자동 사용한다는 것입니다. Closepath는 또한 현재 그려진 수치가 폐쇄되었거나 완전히 닫힌 지역을 형성했다고 캔버스에게 알리며, 이는 미래의 충전 및 스트로크에 매우 유용합니다.

(4) strokerect () : 주어진 위치 및 좌표에 따라 사각형의 개요를 그립니다.

(5) ClearRect () : 사각형 영역의 모든 내용을 지우고 초기 상태, 즉 투명한 색상으로 복원하십시오.

(6) QuadraticCurveto () : 함수의 시작점은 곡선을 그리는 시작점은 전류 좌표이며 두 개의 세트 (x, y) 모서리입니다. 두 번째 그룹은 곡선의 끝점을 나타냅니다. 첫 번째 그룹은 제어점을 나타냅니다. 소위 제어점은 곡선 옆에 위치하고 (곡선 위에 있지 않음) 그 효과는 곡선에 장력력을 생성하는 것과 같습니다. 제어점의 위치를 ​​조정함으로써 곡선의 곡률을 변경할 수 있습니다.

이미지는 캔버스 작업의 복잡성을 증가시킵니다. 이미지가 작동하기 전에 이미지가 완전히로드 될 때까지 기다려야합니다. 페이지 스크립트가 실행되는 동안 브라우저는 일반적으로 그림을 비동기로로드합니다. 보기가 이미지가 완전히로드되기 전에 캔버스에 이미지를 렌더링하면 캔버스에 그림이 표시되지 않습니다.

그라디언트는 색상 세트에서 단계별 샘플링 알고리즘을 사용하고 결과를 스트로크 스타일 및 채우기 스타일에 적용하는 것을 말합니다.

그라디언트 사용에는 세 가지 단계가 필요합니다.

(1) 그라디언트 객체를 만듭니다.

(2) 그라디언트 객체의 색상을 설정하고 전환 방법을 나타냅니다.

(3) 컨텍스트에서 충전 스타일 또는 스트로크 스타일에 대한 기울기를 설정합니다.

표시 할 색상을 설정하려면 그라디언트 객체에서 AddColorStop 함수를 사용하십시오. 이 함수는 두 가지 매개 변수의 색상과 오프셋을 지정할 수 있습니다. 컬러 매개 변수는 개발자가 오프셋 위치에서 쓰다듬거나 채워질 때 사용하고자하는 색상입니다. 오프셋은 0.0에서 1.0 사이의 값으로, 그라디언트 라인을 따라 거리가 얼마나 멀리 변경되는지를 나타냅니다.

선형 구배 외에도 HTML5 캔버스 API는 방사성 구배를 지원합니다. 소위 방사성 구배는 두 개의 지정된 원 사이의 원추형 영역에서 색상이 부드럽게 변한다는 것을 의미합니다. 방사성 그라디언트 및 선형 그라디언트에 사용되는 컬러 종단 지점은 동일합니다.