HTML 5+ 자바스크립트 발표자 : 20091903 김동한 13주차.

Presentation on theme: "HTML 5+ 자바스크립트 발표자 : 20091903 김동한 13주차."— Presentation transcript:

1 HTML 5+ 자바스크립트 발표자 : 김동한 13주차

2 도형 그리기(1/7) 곡선 그리기 cvs.moveTo(0.0) ;
cvs.quadraticCurveTo(50,100,100,0) ; (4) (1) (1) (3) (2) (3) (5) cvs.moveTo(200,0) ; cvs.quadraticCurveTo(300,50,100,50,200,100) ; (4) (6) (7) (5) (6) (7) (2)

3 arc(x, y, radius, startAngle, endAngle, articlockwise);
도형 그리기(2/7) 원을 이용한 곡선 canvas에서는 원을 그릴 수 있습니다. arc() 메서드를 이용합니다. 원의 반지름 arc(x, y, radius, startAngle, endAngle, articlockwise); 원의 중심 좌표 그리기를 시작 및 종료할 각도 원을 그릴 방향 true는 반시계 방향 false는 시계방향 270도(πx3/4) 360도(2 x π) 0도(0) 180도(π) 90도(π/2)

4 도형 그리기(3/7) 원을 이용한 곡선 cvs.arc(100,100,100,0,Math.PT*2,false);
π의 값은 Math.PI로 나타냄 cvs.moveTo(500,100); cvs.arc(500,100,100,Math.PI/3,Math.PI,false); cvs.lineTo(500,100); 60도 부터 180도까지 시계방향으로 그림

5 도형 그리기(4/7) 선 스타일 설정하기 linewidth=2; lineCap=“round”; lineJoin=“round”;

6 도형 그리기(5/7) 음영 설정하기 음영을 설정하려면 shadowBlur, shadowColor, shadowOffsetX
shadowOffsetY프로퍼티를 설정해야 함 shadowOffsetX : 음영의 가로 방향 폭을 지정함 shadowBlur : 음영의 흐리기 폭을 지정 shadowColor : 음영의 색을 지정 shadowOffsetY : 음영의 세로 방향 폭을 지정함

7 도형 그리기(6/7) 그러데이션 설정하기 createLinearGradient(x0, y0, x1, y1) ;
은 createRadialGradient() 메서드로 작성함 addColorStop() 메서드로 색을 추가하면 그러데이션의 색을 지정할 수 있음 createLinearGradient(x0, y0, x1, y1) ; 그러데이션의 시작점 좌표 그러데이션의 끝점 좌표 createRadialGradient(x0, y0, r0, x1, y1, r1) ; 그러데이션의 시작 원의 중심 좌표 및 반지름 그러데이션의 종료 원의 중심 좌표 및 반지름 addColorStop(offset, color); 색의 위치를 0(=시작)부터 1(=종료) 까지의 수치로 지정함

8 도형 그리기(7/7) canvas의 상태를 저장하기 save() ; restore() ;
선의 스타일 등을 설정하면 상태가 변해 버림. 상태를 저장해 두기 위해 save()라는 메서드가 마련되어 됨 restore()메서드를 실행하면 바로 직전에 save()메서드를 실행했을 때의 상태로 되돌아 감 save() ; restore() ;

9 14주차 : web storage Thank you