HTML5 캔버스 메소드 사용 가이드_html5 튜토리얼 기술

캔버스 방식

save()는 현재 환경의 상태를 저장합니다

Restore()는 이전에 저장된 경로 상태와 속성을 반환합니다.

createEvent()

getContext()는 그리기 기능에 액세스하는 데 필요한 API를 나타내는 객체를 반환합니다

toDataUPL()은 캔버스 이미지의 URL을 반환합니다

선 스타일의 속성과 방법

속성:

lineCap은 선의 끝점 스타일을 설정하거나 반환합니다.

lineJoin은 두 선이 교차할 때 생성된 모서리 유형을 설정하거나 반환합니다.

lineWidth는 현재 줄의 너비를 설정하거나 반환합니다.

miterLimit은 최대 마이터 길이를 설정하거나 반환합니다

색상, 스타일, 그림자 속성 및 방법

속성

fillStyle은 그림을 채우는 데 사용되는 색상, 그라데이션 또는 패턴을 설정하거나 반환합니다.

스트로크 스타일은 획에 사용되는 색상, 그라데이션 또는 패턴을 설정하거나 반환합니다.

ShadowColor는 그림자에 사용되는 색상을 설정하거나 반환합니다.

ShadowBlur는 그림자에 사용되는 흐림 수준을 설정하거나 반환합니다.

ShadowOffsetX는 모양에서 그림자까지의 수평 거리를 설정하거나 반환합니다.

ShadowOffsetY는 모양에서 그림자의 수직 거리를 설정하거나 반환합니다.

방법

createLinearGradient()는 선형 그래디언트를 생성합니다(캔버스 콘텐츠에 사용됨)

createPattern()은 지정된 방향으로 지정된 요소를 반복합니다.

createRadialGradient()는 방사형/원형 그래디언트를 생성합니다(캔버스 콘텐츠에 사용됨)

addColorStop()은 그라디언트 객체의 색상이나 정지 위치를 지정합니다

경로 방법

fill()은 현재 도면(경로)을 채웁니다.

스트로크()는 정의된 경로를 그립니다

beginPath()는 경로를 시작하거나 현재 경로를 재설정합니다

moveTo()는 선을 만들지 않고 캔버스의 지정된 지점으로 경로를 이동합니다

closePath()는 현재 지점에서 시작 지점까지의 경로를 생성합니다

lineTo()는 새 점을 추가하고 해당 점에서 마지막으로 지정된 점까지 선을 만듭니다

clip()은 원본 캔버스에서 모든 모양과 크기의 영역을 잘라냅니다

quadraticCurveTo()는 두 번째 베지어 곡선을 생성합니다

bezierCureTo()는 하위 정사각형 베지어 곡선을 생성합니다

arc()는 호/곡선을 생성합니다(원 또는 부분 원을 만드는 데 사용됨)

arcTo()는 두 접선 사이에 호/곡선을 만듭니다

isPointInPath()는 지정된 지점이 현재 경로에 있는 경우 부울 값을 반환합니다.

직사각형

Rect()는 직사각형을 생성합니다

fillRect()는 "채워진" 직사각형을 그립니다.

strokRect()는 직사각형을 그립니다(채우기 없음)

clearRect()는 주어진 직사각형 내에서 지정된 픽셀을 지웁니다

텍스트 속성 및 방법 설정

속성:

글꼴 텍스트 콘텐츠의 현재 글꼴 속성을 설정하거나 반환합니다

textAlign은 텍스트 내용의 현재 정렬을 설정하거나 반환합니다.

textBaseline 설정은 텍스트를 그릴 때 사용되는 현재 텍스트 기준선을 반환합니다.

방법:

fillText()는 캔버스에 "채워진" 텍스트를 그립니다

StrokeText()는 캔버스에 텍스트를 그립니다(패딩 없음)

measureText()는 지정된 텍스트 너비가 포함된 객체를 반환합니다

변환 방법

scale()은 현재 도면의 크기를 더 크거나 작게 조정합니다.

rotate()는 현재 그림을 회전합니다

번역()은 꽃무늬 셔츠의 (0,0) 위치를 다시 매핑합니다

변환()은 그림의 현재 변환 행렬을 대체합니다

setTransform()은 현재 변환을 항등 행렬로 재설정한 다음 변환()을 실행합니다.