Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 |
Tags
- eslint
- 코딩테스트
- 프로그래머스
- useMemo
- VanillaJS
- canvas
- React.memo
- useEffect
- Permutations
- useCallback
- seo
- webpack
- 완전탐색
- 비동기
- 그리디
- venv
- Custom Hook
- react
- 코테
- BFS
- prettier
- python
- await
- web
- useState
- VanillJS
- Hook
- pjax
- 환경설정
- react internals
Archives
- Today
- Total
목록javascript (1)
Amada Coding Club
[VanillaJS] 1-Canvas를 이용해서 그림판 만들어보기-그리기
패스트캠퍼스 강의에서 그림판 만들기 실습을 했는데 너무 흥미로워서 글로 남긴다. 그림판을 제작할 때는 HTML의 캔버스 태그를 이용한다. 코드에선 클래스를 사용했기 때문에 this문을 사용함. 본인 코드에 맞게 적절히 수정하길 참고: El로 끝나는 값-HTML태그 캔버스 작업을 하기 위해선 먼저 캔버스의 context를 가지고 와야 한다. context = 캔버스엘리먼트.getContext('2d와 3d 선택가능'); context는 2d와 3d 선택이 가능하다. 즉, 일반적인 2d작업뿐만 아니라 3d작업도 가능하다는 말! context를 가지고 왔다면 이제 canvas에 이벤트리스너를 등록한다. 그림판에 그림을 그릴 때 나오는 이벤트(행위)는 다음과 같다. 1. 그림판에 마우스를 누르면 그리기 시작(m..
Front-End/VanillaJs
2023. 1. 9. 18:11