html5 canvas study week1n2
TRANSCRIPT
![Page 1: Html5 canvas study week1n2](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a939621a28ab3e0a8b481d/html5/thumbnails/1.jpg)
HTML Study 1 / 2 주차
![Page 2: Html5 canvas study week1n2](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a939621a28ab3e0a8b481d/html5/thumbnails/2.jpg)
- canvas- context
- line- curves
- rect- gradient-overlay
- transform- shadow- pattern
![Page 3: Html5 canvas study week1n2](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a939621a28ab3e0a8b481d/html5/thumbnails/3.jpg)
canvas
Canvas 안에메세지를넣어두면 Canvas 를지원하지않는브라우저에서대체문구를내보낼수있음
width, height 대신 style = “width: n; height : n;”을사용하면이상하게화면이늘어남
![Page 4: Html5 canvas study week1n2](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a939621a28ab3e0a8b481d/html5/thumbnails/4.jpg)
canvas
![Page 5: Html5 canvas study week1n2](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a939621a28ab3e0a8b481d/html5/thumbnails/5.jpg)
canvas
![Page 6: Html5 canvas study week1n2](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a939621a28ab3e0a8b481d/html5/thumbnails/6.jpg)
canvas
기본형식 :캔버스안에서사용할함수는캔버스동작함수내의내부함수로정의
![Page 7: Html5 canvas study week1n2](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a939621a28ab3e0a8b481d/html5/thumbnails/7.jpg)
rect
![Page 8: Html5 canvas study week1n2](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a939621a28ab3e0a8b481d/html5/thumbnails/8.jpg)
draw line
선그리기시작
선그리기종료
이부분이없으면모든그림을연결
호출해야만선이표시
![Page 9: Html5 canvas study week1n2](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a939621a28ab3e0a8b481d/html5/thumbnails/9.jpg)
line
![Page 10: Html5 canvas study week1n2](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a939621a28ab3e0a8b481d/html5/thumbnails/10.jpg)
curves
원점
기준점1 기준점2
종료점
원점은현재위치로커브함수에들어가지않는다.- 각각기준점 1 의 x, y, 기준점 2 의 x, y, 종료점의 x, y- quadratic 은커브가한번이라기준점 2 의좌표가생략
![Page 11: Html5 canvas study week1n2](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a939621a28ab3e0a8b481d/html5/thumbnails/11.jpg)
arc
마지막커서 x1, y1
x2, y2
호의반지름p1 좌표, p2 좌표, 반지름
![Page 12: Html5 canvas study week1n2](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a939621a28ab3e0a8b481d/html5/thumbnails/12.jpg)
gradient
(50, 50)
(100, 100)
![Page 13: Html5 canvas study week1n2](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a939621a28ab3e0a8b481d/html5/thumbnails/13.jpg)
overlay
낑겨넣기?
디폴트 : source-over 순서대로쌓기
destination-over 역순으로쌓기
먼저그려진객체 : destination나중에그려진객체 : source
ex >source-in : 나중에그려진객체중영역이겹치는부분만destination-out : 먼저그려진객체중영역이겹치지않는부분만
![Page 14: Html5 canvas study week1n2](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a939621a28ab3e0a8b481d/html5/thumbnails/14.jpg)
transform1
두번째인자가 -0.2 세번째인자가 -0.2
![Page 15: Html5 canvas study week1n2](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a939621a28ab3e0a8b481d/html5/thumbnails/15.jpg)
transform2
1 . 중심점을가운데로옮겨서2. 시계방향으로 45 도를틀어서3. 가로만두배로늘린다
1. 중점이동
(50, 50)
(0, 0)
2. 45 도회전
3. 가로 x 2
![Page 16: Html5 canvas study week1n2](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a939621a28ab3e0a8b481d/html5/thumbnails/16.jpg)
shadow
setOffsetX, setOffsetY는 pixel 단위이며, 제한없음
context.shadowBlur=2000;
![Page 17: Html5 canvas study week1n2](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a939621a28ab3e0a8b481d/html5/thumbnails/17.jpg)
clip
전체영역중에서 50, 50 만사용하겠다는의미.아래코드에모두영향을미치므로context.save() / context.restore() 와함께사용한다
![Page 18: Html5 canvas study week1n2](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a939621a28ab3e0a8b481d/html5/thumbnails/18.jpg)
pattern
![Page 19: Html5 canvas study week1n2](https://reader034.vdocuments.site/reader034/viewer/2022051414/55a939621a28ab3e0a8b481d/html5/thumbnails/19.jpg)
pattern
no-repeat >> 원본 repeat-x
repeat-y repeat