01장 웹 개요와 실습 환경 구축

Size: px

Start display at page:

Download "01장 웹 개요와 실습 환경 구축"

진기 요
6 years ago
Views:

1 10 장 캔버스

2 목차 1. 캔버스이해하기 2. 캔버스기본 API 사용하기 3. 캔버스고급기능사용하기

3 1 캔버스이해하기 자바스크립트를이용해서웹문서상에그림그리는기능 HTML5 이전 직접이미지파일을 <img> 태그를이용해서문서상에포함 자바애플릿이용 플래시이용 HTML5 캔버스 자바스크립트만을이용해서그림을그릴수있다 별도의플러그인이나프로그램설치없이가능 이미지나그림을합성, 변환조작도가능

4 캔버스좌표계 사각평면의 2 차원좌표계사용 이차원 (2D) 이미지표현 x, y 2개의축으로구성 왼쪽상단모서리가원점 (0, 0) (0, 0) x 축 y 축 (30, 20)

5 픽셀 (pixel) 비트맵그래픽 좌표계상의각각의정사각형네모칸 이미지를구성하는점이며색상을가진다. 각픽셀의색상값을바꾸어다양한이미지를표현 비트맥그래픽 Bitmap graphics 픽셀만으로이미지를표현하고저장하는형태 캔버스의도형이나그림, 글씨등 2 차원비트맵으로저장 이미그려진도형이나그림을확대하는등은작업은불가능

6 캔버스요소 캔버스로그림그리기준비 <canvas> 태그를이용해서캔버스요소추가 그려질영역생성 캔버스크기지정 : width, height 속성이용 DOM 을통한접근을위해 id 지정 캔버스크기 <canvas id="mycanvas" width="30" height="20"> ~ </canvas> DOM 을통한접근

7 컨텍스트 (context) 객체 캔버스로그림그리기준비 캔버스에내용을채우기위한객체 캔버스요소객체의 getcontext() 메소드를이용 <canvas> 요소객체에접근한후 getcontext("2d") 메소드실행 캔버스개체선택 var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); 캔버스채우기객체

8 예제 캔버스만들기 canvas 태그선택 canvas 태그 canvas 객체

9 캔버스기본 API 2 캔버스기본 API 사용하기 컨텍스트객체의메소드를호출함로써그림이그려짐 캔버스컨텍스트의선그리기메소드 선긋기, 경로, 곡선등 현재시작지점에서다음지점까지선을연결하는방식 현재위치이동 moveto(x,y): 현재시작지점을이동시키는메소드 선을그린마지막지점으로현재위치이동

10 기본그리기메소드 1 기본도형그리기메소드 context.moveto(x, y) 선시작지점을 (x, y) 좌표로이동 context.lineto(x, y) 시작점에서 (x, y) 지점까지선그림 context.rect(x, y, width, height); 왼쪽위모서리를 (x, y) 지점과사각형크기 (width, height) 로사각형그림 시작점을 (x, y) 로이동 context.stroke(); 지정된색과선끝모양으로선그림 stroke() 메소드를실행하지않으면선이그려지지않음 기본색상 : 검정색 context.strokerect(); context.rect() + context.stroke() ;

11 예제 호출안하면그려지지않음

12 실행결과

13 예제 사각형그리기 시작좌표 사각형크기

14 기본그리기메소드 2 context.arc(x, y, r, startangle, endangle, anticlockwise) 원점 (x, y) 기준으로반지름 r인원호그림 호시작각도 (startangle) 와끝각도 (endangle) 지정 : 라디안값 180 = π 2*Math.PI, 360 = 2π 2*Math.PI anticlockwise : false( 시계방향 ), true( 반시계방향 ) context.quadraticcurveto(cx, cy, x, y); 제어점 (cx, cy) 하나를가지는곡선그림 시작점은현재위치, 끝점 (x, y) context.beziercurveto(cx1, cy1, cx2, cy2, x, y); 제어점두개를가지는곡선그림 시작점은현재위치이며끝점 (x, y) 두제어점 : (cx1, cy1), (cx2, cy2)

15 경로시작 / 종료 연속된선그리기를통한경로그리기 context.beginpath() 경로시작설정 context.closepath() 경로지정을종료 경로시작지점과종료지점을연결하는선으로경로완성

16 기본그리기메소드 2 반지름 시작각, 끝각 호중심좌표 시계방향 ( 기본값 ) 반시계방향 첫점, 끝점연결

17 실행결과 끝각 끝각 반시계방향 시작각 시계방향 시작각 경로닫기

18 예제 - 곡선메소드 시작점 첫제어점 끝점 첫제어점 두번째제어점

19 실행결과 제어점 (100, 10) 제어점 1 (300, 100) 제어점 2 (550, 100) (50, 100) 시작점 (200, 100) 끝점 (300, 200) 시작점 (450, 200) 끝점 Quadratic 곡선 Bezier 곡선

20 실습 1

21 실습 1

22 기본도형꾸미기 context.linewidth = 5px 선두께설정, px 단위 context.strokestyle = #ff33cd 선색상지정, rgb, #hex 코드 context.linecap = "square 선끝모양지정, 종류 : "butt ( 기본 ), "round", "square context.linejoin = "miter 모서리모양지정, 종류 : "miter ( 기본 ), "round", "bevel"» context.fillstyle 모든도형의내부색상지정 스타일값으로그라데이션 or 패턴지정가능 context.fill(); 지정된 fillstyle 색으로도형채움

23 예제 - 선색, 선모양 이동 시작점 경로초기화 끝점 둥근끝선

24 예제 면색, 선모양 시작점 모서리모양

25 이미지그리기 기존에는이미지를그리기위해서는 <img> 태그를이용 캔버스에이미지그리기 사이즈조정, 절단 (crop) 기능도가능 Image 객체이용 Image() 생성자로생성 var imgobj = new Image(); context.drawimage() 메소드 캔버스컨텍스트에이미지를그리는메소드

26 이미지그리기예제 그릴시작점그릴크기, 원본보다작아축소 절단시작점 절단크기 그릴시작점 그릴크기, 절단크기보다커서확대 26

27 실행결과 원본 절단 절단및확대 확대

28 실습 2 절단위치그릭

29 실습 2

30 캔버스에글자그리기 비트맵방식으로캔버스에텍스트그리기 삽입된글자를수정하거나크기를조정하는것은불가능 텍스트넣기전에폰트, 크기, 정렬방법등결정 context.font 글자체지정, 이탤릭체여부, 글자크기, 폰트등을한번에지정 context.fillstyle = 색상값 ; 글자색상지정 context.strokestyle = 색상값 ; 글자의외곽선색상지정 context.linewidth = 선두께 ; 글자외곽선두께지정 30

31 캔버스에글자장식하기 context.textalign 텍스트정렬방식지정 종류 : "left", "right", "center", "start ( 기본 ), "end context.filltext() 지정된 fillstyle 색으로지정된위치에글자그려줌 글자왼쪽위모서리지점이기준점 context.stroketext(text, x, y); 지정된 strokestyle 색으로캔버스 (x, y) 위치에외곽선그림 글자외곽선만그림 내부비어있는형태 텍스트왼쪽위모서리지점이그리는기준점 31

32 예제 - 글자쓰기 폰트한번에지정 글자위치 글자선굵기 중앙정렬

34 3 캔버스고급기능사용하기 3.1 그리기효과 3.2 변환효과 3.3 기타고급기능 34

35 3.1 그리기효과 그림자효과속성 context.shadowcolor : 그림자색 context.shadowblur : 흐림정도 context.shadowoffsetx : 그림자위치 context.shadowoffsety context.globalalpha 투명도조절 (0~1), 0 완전투명, 1 완전히불투명 context.clip() 정의된경로로도형자르기수행 경로는 path() 등을이용해지정

36 경로벗어난부분제거 경로초기화 글자채움

37 실행결과 context.clip() 수행 context.clip() 미수행 면색 그림자

38 3.2. 변환효과 변환 (transformation) 효과 그림의위치이동, 회전, 대칭등의기능을수행 context.translate(x, y) 평행이동변환 현재점기준으로개체의시작좌표를 (x, y) 만큼이동 context.scale(x, y) 크기변환 (x, y) 값으로가로세로방향의배율조절 1 보다크면확대, 1 보다작으면축소 뒤집기구현가능 context.scale(-1,1); // 좌우대칭 context.scale(1,-1); // 상하대칭 38

39 이동예제 가로 80 이동 원본 가로 80 이동 세로 80 이동 세로 80 이동

40 예제 - 크기변경

41 실행결과 0.5 로크기변경 1.5 로크기변경 원본

42 예제 이미지평행이동및뒤집기

43 평행이동

44 뒤집기 w*2 +10 사직점위치

45 실행결과 사직점위치 사직점위치

46 세로뒤집기

47 세로뒤집기 사직점위치

48 실습 3 가로세로뒤집기 평행이동 + 좌우뒤집기 상하뒤집기 상하 + 좌우뒤집기 원본모양동일

49 실습 3 가로세로뒤집기 시작점 시작점 시작점

50 실습 3 - 소스

51 변환효과 context.rotate( 회전각도 ) 회전변환 각도는라디안 (radian) 값지정 360 = 2π 2*Math.PI 회전중심점 : 좌표원점 (context 의왼쪽위모서리 ) 51

52 예제 - 회전 캔버스원점기준 경로초기화

53 예제 - 회전 경로초기화필요없음

54 실습 4 중심점기준으로회전

55 실습 4- 먼저중심점표시

57 실습 4- 소스

58 사용자정의변환 transform() 메소드 context.transform(a, b, c, d, e, f); 임의의사용자정의변환행렬을지정 ( 어파인변환행렬 ) x yy = 1 a c e b d f x y 1 x, y는변환되기이전좌표 x, y 는사용자정의변환에의해변환된이후의좌표값 58

59 사용자정의변환예제 변환식 크기변환 x =2x 0.2y, y =0.5y 이동변환 (150, 50) 만큼이동 유의사항 그림그리기전에 transform() 메소드실행해야함 59

60 변환할사각형

어파인행렬이용한회전 변환행렬 회전행렬 a c e b d f 0 0 1 회전변환적용 cos θ sin θ 0 sin θ cos θ 0 0 0

61 어파인행렬이용한회전 변환행렬 회전행렬 a c e b d f 회전변환적용 cos θ sin θ 0 sin θ cos θ context.transform(a, b, c, d, e, f ) ; context.transform(a, b, -b, a, 0, 0 ) ;

62 실습 5 원점회전

63 실습 5 - 중심점회전

65 실습 6 영상회전

66 실습 6 평행이동

67 실습 6 평행이동 + 중심점회전

68 실습 7 원호그리기 태극그리기

69 큰반원 2 개 작은반원 2 개

70 함수로변경

71 실습 7 원호그리기 2 회전추가 회전각도 회전기준점

72 개체중심회전수행

73 변환의초기화 현재까지지정된변환이나사용자정의변환행렬을초기화 settransform() 메소드이용 아무런변환을지정하지않은기본상태로초기화 context.settransform(1, 0, 0, 1, 0, 0); 단위행렬 73

74 픽셀데이터접근하기 캔버스에그려진그림의픽셀데이터에접근 getimagedata() 메소드 리턴객체의 data 속성에각픽셀별데이터가 1차원배열로저장되어있음 픽셀구성 : red, green, blue, alpha 값의 4개의요소 var imgdata= context.getimagedata(0, 0, canvas.width, canvas.height); imgdata.data; 캔버스화소데이터 putimagedata() 메소드 픽셀데이터의값을수정후다시컨텍스트에반영 context.putimagedata(imgdata, 0, 0); 74

75 imgdata.data; 1 차원배열, red, green, blue, alpha 4 개로구성 256x256 크기캔버스생성 영상데이터길이 256x256x4 =

76 실습 8 imgdata.data; 4 개색구성 4개모두같은색 : 명암도영상 0 : 검은색, 255 : 흰색 컬러색구성 red 0 ~ 255 green 0 ~ 255 blue 0 ~ 255 alpha 0 ~ 255

77 실습 8 canvus 테이터가져오기 ¼ 만반복 한번반복시 4 개화소값지정

78 실습 7 세로방향그라데이션

79 실습 8 - 소스

80 캔버스비트맵초기화 clearrect() 메소드를 캔버스비트맵초기화 (x, y) 기준으로 width, height 의폭과높이의화소값초기화 context.clearrect(x, y, width, height); 80

81 지정위치화소값을흰색 (255) 로

82 캔버스저장하기 컴버스그림을영상파일로저장가능 캔버스의 todataurl() 메소드이용 그림을 todataurl() 메소드를이용해서 PNG 형태의데이터로변환 이를캔버스요소의 src 속성으로지정하면파일로저장이가능 var dataurl = canvas.todataurl(); canvasdom.src = dataurl; 파리미터 image/png : PNG 파일저장 image/jpeg : jpg 파일저장 82

83 예제 영상파일변환 jpg 파일변환

85 태극기그리기

86 실습 9 소스

87 실습 9 소스

88 중간실행결과

89 실습 9 소스 개체중심회전수행

90 중간실행결과

92 최종실행결과

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 11 장. 캔버스 목차 11.1 캔버스이해하기 11.2 캔버스기본 API 사용하기 11.3 캔버스고급기능사용하기 2 11.1 캔버스이해하기 11.1.1 캔버스의특징 11.1.2 캔버스시작하기 3 HTML5 캔버스 자바스크립트를이용해서웹문서상에그림그리는기능 HTML5 이전 직접이미지파일을 태그를이용해서문서상에포함 자바애플릿이용