티스토리 뷰

javascript30

08 - Fun with HTML5 Canvas

주먹불끈 2019. 3. 11. 17:29

개요

 

HTML5 Canvas 기능 맛보기

 

 

내용

 

#draw # 뭘까

 

- id 일때에는 # 쓰자.

 

 


 

1) hsl 알아보기

- Hue, Saturation, Lightness 이다.

- Hue 0 to 360 까지의 색깔이다. 빨간색 0, 초록색 120, 파란색 240 이다.

- Saturation 0% 그레이, 100% Full color 이다.

- Lightness 0% 검정, 100% 흰색이다.

 

2) beginPath() 함수

- 새로운 경로를 만든다.

- 이후로 이렇게 새로 생성된 경로에 다양한 명령으로 구성하고 만들게 된다.

EventListener() 4

 

- 마우스가 눌려진 경우에만 그려질 있도록 해준다.

- 처음 시작할때의 좌표를  눌려진 순간의 좌표로 해준다.

 

- 마우스가 움직이는 동안에는 계속 draw() 함수가 실행된다.

- 물론 isDrawing == true 일때만 그림이 그려진다.

- mouseup, mouseout (= 마우스가 창밖으로 나갈 경우) 에는 그만 그린다. 

 

동작코드는 따로 필요는 없을듯하다.

동영상에 설명되어 있음

 

 


반응형

'javascript30' 카테고리의 다른 글

10 - Hold Shift and Check Checkboxes  (0) 2019.03.12
09 - Dev Tools Domination  (0) 2019.03.11
07 - Array Cardio Day 2  (0) 2019.03.09
06 - Type Ahead  (0) 2019.03.08
05 - Flex Panel Gallery  (0) 2019.03.06
반응형
잡학툰 뱃지
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2024/03   »
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
글 보관함