Learning HTML5 Canvas #2 Jeon Yong ju.

Presentation on theme: "Learning HTML5 Canvas #2 Jeon Yong ju."— Presentation transcript:

1 Learning HTML5 Canvas #2 Jeon Yong ju

2 캔버스 상태정보 캔버스의 회전이나 이동, 크기 등에 대한 변환행렬 정보
rotate() / setTransform() / translate() / scale() 현재의 영역 선택정보 캔버스 특성의 현재값 globalAlpha : 투명도 globalCompositeOperation : 그림의 순서 strokeStyle / fillStyle : 선, 칠 속성 textAlign, textBaseline : 텍스트 정렬 lineCap, LineJoin, lineWidth, meterLimit : 선 모양 font : 글씨 shadowBlur, shadowColor, shadowOffsetX / Y : 그림자

3 2.7 캔버스 변환 context.setTransform(1,0,0,1,0,0) – 캔버스 변환행렬
context.rotate(angle) – 캔버스 회전 context.translate(x,y) – 캔버스 원점이동 context.scale(x,y) – 캔버스 크기조정

4 2.7 context.setTransform context.setTransform(a,b,c,d,e,f)??
- 여러가지 변환들을 행렬 값으로 표현한 것. (외부 3D API에서 사용) - (1,0,0,1,0,0)을 옆에 대입하면 단위행렬이 되어 변환이 초기화 됨

5 2.7 context.setTransform 예를 들어 처음도형 –> 원점이동 –> 회전변환을 했다면
다음 도형을 그릴 때는 처음도형과 같은 상황에서 도형을 그릴 수 없다. 따라서 Context.setTransform(1,0,0,1,0,0); 을 적용해주면 변환된 내용들이 초기화된다.(예제 2_10.html)

6 2.7 context.rotate context.rotate(angle) – 예제 2_8.html
1。 = π/180 = Math.PI/180 기준점 = (0,0) 캔버스 공간(화면출력 부분) 기준점을 이동하면 제자리에서 회전가능 45도 회전 context.rotate(Math.PI/180*45)

7 2.7 context.translate context.translate(x, y) – 예제 2_9.html
기준점 = (0,0) 캔버스 공간(화면출력 부분) context.translate(125,125) 나머지 좌표는 상대적으로 변경됨 기준점 = (0,0)

8 2.8 색상과 그라디언트 넣기 context.fillStyle = ‘ 색상값 ’- 색상 채우기 설정 rgb 메서드로 색상설정
16진수 숫자로 색상설정 rgba 메서드로 색상설정 context.createLinearGradient(x1,y2, x2,y2) - 선형 그라디언트 수평/수직 그라디언트 대각선 그라디언트 * 색상 정지점이 필요 context.createRadialGradient(x1,y1,r1, x2,y2,r2) - 방사형 그라디언트 - 예제 2_14, 17

9 2.9 도형에 패턴 채우기 context.createPattern(Image 인스턴스, ‘패턴방식’)
(JS) Image 객체 : 그림에 대한 정보를 알려주는 객체 Image 객체의 속성(인스턴스에 상속됨) border 이미지 객체의 테두리 두께를 알려줌 complete 브라우저가 이미지 로딩을 완료했는지 여부를 알려줌 height 이미지의 높이를 알려줌 width 이미지의 너비를 알려줌 hspace 이미지 가로 여백 값을 알려줌 vspace 이미지 세로 여백 값을 알려줌 name 이미지 이름을 알려줌 prototype 이미지 객체의 속성을 추가하기 위해서 사용 src 이미지 객체 파일의 URL 주소를 알려줌 lowsrc 이미지 객체 파일의 URL 주소를 알려줌 (해상도 작은 파일)

10 2.9 도형에 패턴 채우기 context.createPattern(Image 인스턴스, ‘패턴방식’) 패턴 방식
repeat : 그림을 반복해서 채움 repeat-x : x축 방향으로만 채움 repeat-y : y축 방향으로만 채움 no-repeat : 1번만 채움 - 예제 2_25.html

11 2.10 그림자 만들기 context.shadowOffsetX – x 축 방향 그림자 길이
context.shadowOffsetY – y축 방향 그림자 길이 context.shadowBlur – 블러(번짐) 정도 context.shadowColor – 그림자 색상 - 예제 2_27.html

12 Thank you HTML5 Canvas… #2