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
- API
- react강의
- React
- 자바스크립트
- K디지털기초역량훈련
- 나라사랑카드
- flex item
- DOM
- 프로그래머스 lv0
- 리액트
- 변수 선언
- 호이스팅
- javascript
- CSS
- SVG
- 바이트디그리
- 내일배움카드
- js
- html
- 코딩테스트 js
- udemy
- 패스트캠퍼스
- 노드
- 프로그래머스 JS
- js split
- Flex Container
- 코딩테스트 lv0
- flex
- margin-left
- 국비지원
Archives
- Today
- Total
목록js canvas 사용법 (1)
꺾이지 않는 마음

노마드코더 강의를 수강하다가 Canvas API를 알게되었다. 이 API를 사용하면 마치 한붓그리기 놀이(?) 같은 것을 할 수 있게 해준다. 태그를 만들고(이 태그가 도화지 역할을 한다), 여러 함수를 사용하여 그 안에 그림을 그릴 수 있다. 아래는 canvas api를 이용하여 내가 그린 그림이다. 이렇게 원, 직사각형 등 도형을 그릴 수 있고, 그냥 선을 그을 수도 있다. 색깔도 변경 가능하다. 신기해서 블로그에 복습 겸 정리해놓으려고 한다. ⚙️ 기본 세팅법 1. HTML 파일의 태그 안에 태그를 삽입해준다.(이 태그가 그림을 그릴 도화지이다) 2. js 파일을 하나 만들고 3. js 파일에서 태그를 셀렉터를 통해 선택한 후, getContext("2d") 메소드를 사용하여 그림을 그린다. con..
웹 프로그래밍/HTML&CSS
2022. 10. 12. 22:56