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
댓글