Loading

Preferences

함수명 설명
getContext() 캔버스의 렌더링 컨텍스트를 가져옵니다
fillRect(x, y, width, height) 캔버스에 사각형을 그림
strokeRect(x, y, width, height) 사각형의 윤곽선을 그림
clearRect(x, y, width, height) 캔버스의 특정 부분을 지웁니다
beginPath() 새로운 경로를 시작합니다
moveTo(x, y) 펜을 캔버스의 지정된 위치로 이동합니다
lineTo(x, y) 현재 위치에서 지정된 위치까지 선을 그림
arc(x, y, radius, startAngle, endAngle, anticlockwise) 원이나 원호를 그림
fill() 현재 그리기 경로를 채웁니다
stroke() 현재 경로를 윤곽선으로 그림
closePath() 현재 경로를 닫습니다
fillStyle 도형 내부를 채울 색상이나 스타일을 설정합니다
strokeStyle 도형의 윤곽선 색상이나 스타일을 설정합니다
lineWidth 선의 너비를 설정합니다
font 텍스트의 스타일과 크기를 설정합니다
fillText(text, x, y, [maxWidth]) 지정된 위치에 텍스트를 채워 그림
strokeText(text, x, y, [maxWidth]) 지정된 위치에 텍스트의 윤곽선을 그림
캔버스(Canvas) 이미지 그리기 저장
  • 캔버스를 통한 서류 사인을 온라인으로 통해서 간단하게 받아 볼수 있습니다
  • <canvas>는 처음에는 src 및 alt 속성이 없다는 점만 제외하면 <img> 요소처럼 보입니다. 실제로 <canvas> 요소에는 width와 height의 두 속성만 있습니다. width 및 height 속성을 지정하지 않으면 캔버스의 처음 너비는 300 픽셀이고 높이는 150 픽셀입니다
  • <canvas>요소는 일반적인 이미지 (margin, border, background…) 처럼 스타일을 적용시킬 수 있습니다. 하지만 이 방법은 실제 캔버스 위에 그리는 것에는 영향을 끼치지 않습니다
  • 캔버스를 이용하여 애니메이션 게임을 제작할수 있습니다
  • getContext()는 HTML <canvas> 요소의 내장 메서드이다. 이 메서드 사용시 렌더링 컨텍스트와 그것의 그리기 함수를 가져올 수 있다. 가장 일반적으로 사용되는 컨택스트는 2d 입니다
  • 해상도 독립성: <canvas>는 비트맵 기반으로 작동하므로, 디스플레이의 해상도에 따라 픽셀이 확장되거나 축소될 수 있습니다
  • 동적 그래픽: 자바스크립트를 사용하여 캔버스에 그려진 그래픽은 사용자 상호작용에 따라 실시간으로 변경될 수 있습니다
  • 접근성: 캔버스에 그려진 내용은 스크린 리더와 같은 보조 기술에서 해석되지 않으므로, 접근성을 고려한 추가적인 마크업이 필요할 수 있습니다
  • 하위 호환성: 구형 브라우저에서는 <canvas> 요소가 지원되지 않을 수 있습니다. 이 경우 <canvas> 태그 안에 대체 콘텐츠를 제공하는 것이 좋습니다
  • 캔버스,Canvas,사인창,싸인창,그래픽 애니메이션 표현,게임 그래픽,데이터 시각화,사진 조작 및 실시간 비디오 처리,draw
댓글