[JavaScript] 자바스크립트에서 캔버스 사용하기
2022. 7. 26. 20:40ㆍProgram/JavaScript
203_자바스크립트에서 캔버스 사용하기
[적용]
- 비트맵 기반의 도형을 스크립트에서 사용하고 싶을 때
[문법]
| 메소드 | 의미 | 반환 |
| canvas.getContext('2d') | 캔버스에서 명령 가져오기 | 콘텍스트 |
| context.fillRect(x, y, 폭, 높이) | 직사각형 영역 칠하기 | 없음 |
[내용]
캔버스(Canvas) 요소는 그래픽 관련 기능을 한다.
SVG는 벡터 그래픽을 다루지만, 캔버스 요소는 비트맵 그래픽을 다룬다.
비트맵은 SVG와 달리 확대, 축소 시 사이즈를 적절히 조절하지 않으면 화질 저하가 발생한다.
SVG는 일러스트 등에 적합하지만, 이미지 가곡 등의 작업은 캔버스 요소가 유용하다.
캔버스 요소 사용을 위해서는 HTML에 캔버스 요소를 배치한 뒤,
자바스크립트로 요소의 id 값을 참조하고 그림 관련 명령을 다루는 객체인 콘텍스트를 가져온다.
텍스트의 fillRect()를 사용해 직사각형을 생성한다.
HTML index.html
<body>
<canvas id="my-canvas" width="300" height="300"></canvas>
</body>JavaScript main.js
// 캔버스 요소 참조
const canvas = document.querySelector('#my-canvas');
// 콘텍스트 가져오기
const context = canvas.getContext('2d');
// 도형 생성
context.fillRect(5, 5, 100, 100);
실행결과
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트에서 캔버스에 이미지 붙여넣기 (0) | 2022.07.27 |
|---|---|
| [JavaScript] 자바스크립트에서 캔버스 요소 색칠하기/선 그리기 (0) | 2022.07.27 |
| [JavaScript] 자바스크립트에서 SVG 그래픽 다운로드하기 (0) | 2022.07.26 |
| [JavaScript] 자바스크립트에서 SVG 요소 애니메이션 효과 주기 (0) | 2022.07.26 |
| [JavaScript] 자바스크립트에서 SVG 요소 마우스로 다루기 (0) | 2022.07.26 |