Canvas기본

devAnderson·2022년 2월 24일
0

TIL

목록 보기
62/106

📱 Canvas란

그림을 그릴 때 도화지 역할을 하는 캔버스의 의미처럼, Canvas태그는 그 내부에서 도형, 데이터, 애니메이션 등 다양한 내용들을 그릴 수 있는 태그이다

📱 Canvas 설정

스크린샷 2022-02-24 오전 8 37 08

주의! canvas를 css로 width와 height을 설정할 경우, 내부에 있는 옵션들이 제대로 작동하지 않는다.
반드시, inline 형태로 설정해주거나 아니면 js를 통해 설정해줘야한다 ( 조금 이해는 안되지만 )
스크린샷 2022-02-24 오전 9 35 44

스크린샷 2022-02-24 오전 8 43 28 스크린샷 2022-02-24 오전 8 43 58

📱 그림을 그려보자

사각형 그려보기

스크린샷 2022-02-24 오전 9 33 32

위 메서드는 ctx 객체 내장된 프로토타입 메서드이다.

스크린샷 2022-02-24 오전 9 34 02 스크린샷 2022-02-24 오전 9 34 38

line 추가하기

스크린샷 2022-02-24 오전 9 46 52 스크린샷 2022-02-24 오전 9 47 05

영역 지우기

스크린샷 2022-02-24 오전 9 48 47 스크린샷 2022-02-24 오전 9 49 17

📱 이벤트를 등록해보자

스크린샷 2022-02-24 오전 10 04 59 스크린샷 2022-02-24 오전 10 05 12
profile
자라나라 프론트엔드 개발새싹!

0개의 댓글