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