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