HTML Canvas 참조 가이드

HTML Canvas 참조 가이드

HTML <canvas> 태그는 스크립트(일반적으로 JavaScript)를 통해 동적으로 그래픽을 그리는 데 사용됩니다.

HTML Canvas에 대한更多信息를 알고 싶다면, 우리의 HTML Canvas 튜토리얼을 읽어보세요.

색상, 스타일, 그리고 그림자

속성 설명
fillStyle 填充绘画的颜色、渐变或模式을 설정하거나 반환합니다
strokeStyle 선 표시 스타일을 설정하거나 반환합니다
shadowColor 그림자를 위한 색상을 설정하거나 반환합니다
shadowBlur 그림자를 위한 흐림 수준을 설정하거나 반환합니다
shadowOffsetX 그림자가 형상에서의 수평 거리를 설정하거나 반환합니다
shadowOffsetY 그림자가 형상에서의 수직 거리를 설정하거나 반환합니다
메서드 설명
createLinearGradient() 캔버스 내용에 사용되는 선형 그래디언트를 만듭니다
createPattern() 지정된 방향에서 지정된 요소를 반복합니다
createRadialGradient() 방사형/원형의 그래디언트를 만듭니다(캔버스 내용에 사용)
addColorStop() gradient 객체 내에서 색상과 중지 위치를 규정합니다

색상, 스타일, 그리고 그림자

속성 설명
선 스타일 lineCap
선의 끝 끝 스타일을 설정하거나 반환합니다 lineJoin
두 선이 교차할 때 생성되는 모서리 유형을 설정하거나 반환합니다 lineWidth
현재 선 너비를 설정하거나 반환합니다 miterLimit

최대 기울기 길이를 설정하거나 반환합니다

메서드 설명
矩형 rect()
矩형을 만듭니다 채운矩형을 그립니다
빈矩형을 그립니다 빈矩형을 그립니다
clearRect() 지정된 픽셀을 주어진矩형 내에서 지우습니다

경로

메서드 설명
fill() 현재 그리기 영역을 채웁니다
stroke() 정의된 경로를 그립니다
beginPath() 경로를 시작하거나 현재 경로를 초기화합니다
moveTo() 경로를 캔버스의 지정된 점으로 이동시키지만 선을 만들지 않습니다
closePath() 현재 점에서 시작점으로 돌아오는 경로를 만듭니다
lineTo() 새 점을 추가하고, 그 점에서 마지막으로 지정된 점까지의 선을 캔버스에서 그립니다
clip() 원본 캔버스에서 모든 형상과 크기의 영역을 잘라냅니다
quadraticCurveTo() 이차 베塞尔 곡선을 생성
bezierCurveTo() 삼차 베塞尔 곡선을 생성
arc() 궤도/곡선을 생성(원형이나 원형의 일부를 만들기 위해 사용)
arcTo() 두 톱니바퀴 사이의 궤도/곡선을 생성
isPointInPath() 지정된 점이 현재 경로에 위치하면 true를 반환하고, 그렇지 않으면 false를 반환

변환

메서드 설명
scale() 현재 그리기를 더 크거나 더 작게 확대
rotate() 현재 그리기를 회전
translate() 캔버스의 (0,0) 위치를 다시 지정
transform() 그리는 현재 변환 행렬을 대체
setTransform() 현재 변환을 기본 행렬로 초기화합니다. 그런 다음 transform()을 실행합니다.

텍스트

속성 설명
font 텍스트 내용의 현재 글꼴 속성을 설정하거나 반환
textAlign 텍스트 내용의 현재 정렬 방식을 설정하거나 반환
textBaseline 텍스트 그리기 시 사용하는 현재 텍스트 기본선을 설정하거나 반환
메서드 설명
fillText() 캔버스에 '채운' 텍스트를 그리기
strokeText() 캔버스에 텍스트를 그리기(채우지 않음)
measureText() 지정된 텍스트 너비를 포함하는 객체를 반환

이미지 그리기

메서드 설명
drawImage() 이미지, 캔버스 또는 비디오를 캔버스에 그리기

픽셀 연산

속성 설명
width ImageData 객체의 너비를 반환
height ImageData 객체의 높이를 반환
data 지정된 ImageData 객체의 이미지 데이터를 포함하는 객체를 반환
메서드 설명
createImageData() 새로운 비어 있는 ImageData 객체를 생성
getImageData() 지정된 사각형의 픽셀 데이터를 복사한 ImageData 객체를 반환
putImageData() 이미지 데이터(지정된 ImageData 객체에서)를 캔버스에 다시 배치

合成

속성 설명
globalAlpha 그리는 현재 alpha 또는 투명도를 설정하거나 반환
globalCompositeOperation 새로운 이미지를 기존 이미지에 그리는 방법을 설정하거나 반환

기타

메서드 설명
save() 현재 환경 상태를 저장
restore() 이전에 저장된 경로 상태와 속성을 반환
createEvent() 　
getContext() 　
toDataURL()