HTML5 웹 프로그래밍 입문 (개정판) 11장. 캔버스 그리기 API
목차 11.1 캔버스 이해하기 11.2 캔버스 기본 API 사용하기 11.3 캔버스 고급 기능 사용하기 소스코드 실행 사이트 주소 : http://webclass.me/html5_2e 폴더 ch02/ ~ ch13/에 각 장의 예제가 있어서 실행결과 확인 및 소스보기가 가능합니다. 캔버스 그리기 API
11.1 캔버스 이해하기 11.1.1 캔버스의 특징 11.1.2 캔버스 시작하기
HTML5 캔버스 자바스크립트를 이용해서 웹 문서상에 그림 그리는 기능 HTML5 이전 HTML5 캔버스 직접 이미지 파일을 <img> 태그를 이용해서 문서상에 포함 자바 애플릿 이용 플래시 이용 HTML5 캔버스 자바스크립트만을 이용해서 그림을 그릴 수 있다 별도의 플러그인이나 프로그램 설치 없이 가능 이미지나 그림을 합성, 변환 조작도 가능
캔버스의 특징 캔버스 좌표계 : 사각 평면의 2차원 좌표계 픽셀(pixel) 비트맥 그래픽(Bitmap graphics) 이차원 (2D) 이미지 표현 => x, y 2개의 축 왼쪽 상단 모서리가 원점 (0, 0) 픽셀(pixel) 좌표계 상의 각각의 정사각형 네모 칸 이미지를 구성하는 점이며 색상을 가진다. 비트맥 그래픽(Bitmap graphics) 픽셀만으로 이미지를 표현하고 저장하는 형태 캔버스의 도형이나 그림, 글씨 등을 2차원 비트맵으로 저장 이미 그려진 도형이나 그림을 확대하는 등은 작업은 불가능 (0, 0) (30, 20) x 축 y 축
캔버스 시작하기 캔버스 요소 : <canvas> 태그 이용, 컨텍스트(context) 객체 width, height 속성으로 캔버스 크기 지정, DOM 접근을 위해 id 지정 컨텍스트(context) 객체 캔버스에 내용을 채우기 위한 객체 <canvas> 요소 객체에 접근한 후 getContext("2d") 메소드 실행 <body> <canvas id="myCanvas" width="300" height="200"></canvas> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.moveTo(50, 50); context.lineTo(200, 50); context.stroke(); </script> </body> 캔버스 요소의 정의 캔버스 컨택스트 가져오기 그림을 그리는 자바스크립트 코드
11.2 캔버스 기본 API 사용하기 11.2.1 기본 도형 그리기 11.2.2 기본 도형 꾸미기 11.2.3 이미지와 글자 그리기
캔버스 기본 도형 그리기 캔버스 기본 API 캔버스 컨텍스트의 선 그리기 메소드 컨텍스트 객체의 메소드를 호출함로써 그림이 그려짐 캔버스 컨텍스트의 선 그리기 메소드 선긋기, 경로, 곡선 등 현재 위치에서 다음 지점까지 선을 연결하는 방식 현재위치 이동 : moveTo(x,y) 메소드 선을 그린 경우에는 마지막 지점으로 현재 위치 이동 캔버스 컨텍스트 메소드 기능 및 설명 context.moveTo(x, y) 선의 시작 지점을 (x, y) 로 이동 context.lineTo(x, y) 현재 위치에서 (x, y) 까지 선 그리기 context.rect(x, y, width, height); 왼쪽 위 모서리가 (x, y) 지점이고, 가로와 세로 변의 크기가 width, height인 사각형 그리기 context.stroke(); 현재 지정된 색상과 모양으로 선을 그린다. stroke() 메소드를 실행하지 않으면 선이 안 그려진다.
직선, 사각형 그리기 예제 (50, 50) (200, 50) (200, 100) (100, 100) (50, 150) (150, 180) 1 2 3 4 5 6 7 8 9 10 var canvas = document.getElementById("myCanvas"); var myContext = canvas.getContext("2d"); myContext.moveTo(50, 50); myContext.lineTo(200, 50); myContext.lineTo(200, 100); myContext.lineTo(100, 100); myContext.lineTo(50, 150); myContext.lineTo(150, 180); myContext.stroke(); (20, 20) (200, 200 ) (50, 50) (170, 170 ) (120, 120) (150, 150) 1 2 3 4 5 6 7 var canvas = document.getElementById("myCanvas"); var myContext = canvas.getContext("2d"); myContext.rect(50, 50, 100, 100); myContext.rect(20, 20, 180, 180); myContext.rect(120, 120, 50, 50); myContext.stroke();
beginPath();가 없으면 선이 연속된다. 원호 그리기 예제 myContext.arc(x, y, r, startAngle, endAngle, antiClockwise) (x, y)를 원점으로 하고 반지름 r인 원호. 시작 각도와 끝 각도를 지정 antiClockwise 값을 false로 설정하면 시계방향(기본값) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var canvas = document.getElementById("myCanvas"); var myContext = canvas.getContext("2d"); myContext.beginPath(); myContext.arc(30, 100, 20, 0, 1.5*Math.PI); // Math.PI 상수를 이용해 각도지정 myContext.stroke(); myContext.arc(110, 100, 40, 1*Math.PI, 1.5*Math.PI, true);// 반시계방향 원호 myContext.closePath(); // 경로 시작점까지 직선으로 연결하며 경로를 종료한다. myContext.arc(240, 100, 60, 0, 2*Math.PI); // 360도 원호를 그려 원 그리기 beginPath();가 없으면 선이 연속된다.
곡선 그리기 예제 myContext.quadraticCurveTo(cx, cy, x, y); 하나의 제어점 myContext.bezierCurveTo(cx1, cy1, cx2, cy2, x, y); 시작점은 현재, 두개 제어점은 (cx1, cy1)과 (cx2, xy2), 끝점 (x, y) 1 2 3 4 5 6 7 8 9 10 11 12 var canvas = document.getElementById("myCanvas"); var myContext = canvas.getContext("2d"); myContext.moveTo(50, 200); myContext.quadraticCurveTo(100, 10, 200, 200); myContext.stroke(); myContext.moveTo(300, 200); myContext.bezierCurveTo(300, 100, 600, 100, 450, 200); (100, 10) (50, 100) Quadratic 곡선 (200, 100) 제어점 시작점 끝점 (300, 100) 제어점1 (300, 200) (450, 200) (550, 100) 제어점2 Bezier 곡선
myContext.clearRect(x, y, width, height); 경로 그리기, 캔버스 비트맵 초기화 연속된 선 그리기를 통한 경로 그리기 myContext.beginPath() 경로의 시작 설정 myContext.closePath() 경로 지정을 종료 처음 경로 시작 지점으로 선을 연결하여 경로를 완성 캔버스 비트맵을 초기화할 수 있는 가장 간편한 방법은 clearRect() 메소드를 이용 (x, y) 위치를 기준으로 width, height의 폭과 높이의 비트맵을 초기화 한다 myContext.clearRect(x, y, width, height);
선 꾸미기 예제 lineWidth strokeStyle lineCap 선의 두께 (픽셀 개수) 선의 색상 예) "blue" 혹은 "#0000ff" 등 lineCap 선의 양쪽 끝 모양 "butt", "round", "square" 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 myContext.beginPath(); myContext.moveTo(10, 20); myContext.lineTo(100,20); myContext.lineWidth = 20; myContext.strokeStyle = "blue"; myContext.lineCap = "butt"; myContext.stroke(); myContext.moveTo(10, 60); myContext.lineTo(100, 60); myContext.strokeStyle = "red"; myContext.lineCap = "round"; myContext.moveTo(10, 100); myContext.lineTo(100, 100); myContext.strokeStyle = "green"; myContext.lineCap = "square";
도형 꾸미기 예제 lineJoin fillStyle context.fill(); 선이 꺽이는 모서리 모양 "miter", "round", "bevel" fillStyle 도형의 내부를 색칠할 색상 값 context.fill(); 현재 fillStyle 색상으로 도형 채우기 이전 fill() 메소드 이후의 모든 도형 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 myContext.beginPath(); myContext.rect(20, 20, 50, 80); myContext.lineWidth = 20; myContext.strokeStyle = "black"; myContext.lineJoin = "miter"; myContext.fillStyle = "grey"; myContext.stroke(); myContext.fill(); myContext.rect(110, 20, 50, 80); myContext.lineJoin = "round"; myContext.fillStyle = "pink"; myContext.rect(200, 20, 50, 80); myContext.lineJoin = "bevel"; myContext.fillStyle = "yellow";
이미지 그리기 기존에 이미지를 포함하기 위해서는 <img> 태그를 이용 캔버스에 이미지 그리기 Image 객체를 이용 Image() 생성자를 이용해서 생성 drawImage() 메소드 캔버스 컨텍스트에서 이미지를 그리는 메소드 사이즈 조정, 크롭(crop) 등의 기능도 가능 var imgObj = new Image(); 캔버스 그리기 API
이미지 그리기 예제 캔버스에 이미지 그리기 Image 객체 생성 : Image() 생성자 이용 drawImage() 메소드 캔버스 컨텍스트에서 이미지 그리기 이미지 사이즈 조정 이미지 크롭 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var canvas = document.getElementById("myCanvas"); var context2d = canvas.getContext("2d"); var imgObj = new Image(); imgObj.src = "clownfish.jpg"; imgObj.onload = function() { // (50, 50) 지점에 원래 크기 그대로 이미지 그리기 myContext.drawImage(imgObj, 50, 50); // 크기조정하기: (350, 50) 지점에 150 x 100 크기로 이미지 그리기 myContext.drawImage(imgObj, 350, 50, 150, 100); // 크기조정하기: (550, 50) 지점에 100 x 100 크기로 이미지 기 myContext.drawImage(imgObj, 550, 50, 100, 100);
이미지 그리기 예제 Image crop 원본 이미지에서 자르고, 캔버스에 그린다 18 19 20 21 22 23 24 25 26 27 // 이미지 자르기 후 크기조정: // 1) 원본 이미지 (70, 50) 지점에서 70 x 70 크기의 이미지를 자른다. // 2) Canvas의 (350, 180) 지점에 70 x 70 크기로 그리기 myContext.drawImage(imgObj, 70, 50, 70, 70, 350, 180, 70, 70); // 1) 원본 이미지 (120, 50) 지점에서 100 x 50 크기의 이미지를 자른다. // 2) Canvas의 (450, 180) 지점에 125 x 75 크기로 그리기 myContext.drawImage(imgObj, 120, 50, 100, 50, 450, 180, 100, 50); } 이미지 사이즈 조정 이미지 크롭
캔버스에 글자 그리기 비트맵 방식으로 캔버스에 텍스트 그리기 글자 그리기 메소드 글자 외곽선 그리기 텍스트를 그려 넣기 전에 폰트, 크기, 정렬방법 등을 결정 삽입된 글자를 수정하거나 크기를 조정하는 것은 불가능 글자 그리기 메소드 context.font : 글자체 지정. 이탤릭체, 크기, 폰트 등 한번에 지정 context.textAlign :텍스트 정렬. "left", "right", "center", "start", "end" context.fillStyle : 글자의 색상, 예) "blue" 혹은 "#0000ff" 등 context.fillText() : 지정된 위치에 글자를 그린다 글자 외곽선 그리기 context.strokeStyle : 글자의 외곽선 색상 context.lineWidth : 외곽선의 선두께 context.strokeText(text, x, y) : (x, y) 위치에 text 외곽선을 그린다
글자 그려넣기 예제 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 myContext.rect(0, 0, 400, 300); myContext.stroke(); var text1 = "HTML5 Text Drawing!"; var text2 = "Left aligned text"; var text3 = "Center aligned text"; var text4 = "Right aligned text"; myContext.font = "italic 16pt Times New Roman"; myContext.fillStyle = "blue"; myContext.fillText(text1, 200, 50); myContext.font = "12pt Tahoma"; myContext.fillStyle = "red"; myContext.textAlign = "left"; myContext.fillText(text2, 200, 100); myContext.font = "bold 24pt Courier New"; myContext.strokeStyle = "black"; myContext.textAlign = "center"; myContext.lineWidth = 1; myContext.strokeText(text3, 200, 150); myContext.lineWidth = 2; myContext.strokeText("lineWidth=2", 200, 200); myContext.font = "bold 16pt Batang"; myContext.fillStyle = "green"; myContext.textAlign = "right"; myContext.fillText(text4, 200, 250); 캔버스 그리기 API
11.3 캔버스 고급 기능 사용하기 11.3.1 그리기 효과 11.3.2 변환 효과 11.3.3 기타 고급 기능
그리기 효과 합성 (composition) 효과 그림자 효과: shadow 투명도 조절: globalAlpha shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY 투명도 조절: globalAlpha 0과 1 사이의 실수값, 0이 완전 투명 지정한 도형 모양으로 잘라내기: clip clip() 메소드가 바로 이전에 정의된 경로로 도형 자르기
(a) clip() 메소드를 실행 하지 않은 경우 그리기 효과 예제 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var myContext = canvas.getContext("2d"); myContext.beginPath(); myContext.rect(40, 10, 60, 100); myContext.closePath(); myContext.stroke(); myContext.clip(); myContext.rect(20, 20, 60, 60); myContext.fillStyle = "green"; myContext.shadowColor = "blue"; myContext.shadowBlur = 30; myContext.shadowOffsetX = 10; myContext.shadowOffsetY = 20; myContext.fill(); myContext.arc(80, 30, 30, 0, 2*Math.PI); myContext.fillStyle = "red"; myContext.globalAlpha = 0.5; myContext.shadowColor = "transparent"; </script> 클립 효과 사용시 유의 사항 잘라내고자 하는 그림을 그리기 이전에 clip() 메서드를 실행해 함 clip() 메서드 실행 이전에 그려진 그림은 자르기 효과가 적용 안됨 (a) clip() 메소드를 실행 하지 않은 경우 (b) clip() 메소드를 실행 한 경우 캔버스 그리기 API
변환 효과 기본 변환(transformation) 그림을 그려넣을때 위치 이동, 크기 변환, 회전 등의 기능을 수행 translate(x, y); 이동 변환, (x, y) 만큼 이동 scale(x, y); 크기 변환, 가로 세로 방향의 배율 (x, y) rotate(회전각도); 회전 변환, 회전각도는 radian 값, 회전 중심점은 왼쪽 위 모서리
기본 변환 예제 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 var canvas = document.getElementById("myCanvas"); var myContext = canvas.getContext("2d"); var imgObj = new Image(); imgObj.src = "clownfish.jpg"; imgObj.onload = function() { // original drawing myContext.drawImage(imgObj, 50, 50); // 이동변환 myContext.translate(300, 0); // (300, 50) 이동 // 크기변환 myContext.setTransform(1, 0, 0, 1, 0, 0); myContext.scale(1.2, 0.33); // 가로 1.2, 세로 1/3배 스케일 myContext.drawImage(imgObj, 40, 800); // 회전변환 myContext.translate(750, 0); myContext.rotate(Math.PI/4); myContext.drawImage(imgObj, 0, 0); } 캔버스 그리기 API
상하/좌우 대칭 변환 scale() 메소드의 인자 값을 조정하여 구현 현재까지 지정된 변환이나 사용자 정의 변환 행렬을 초기화 setTransform() 메소드 이용 아무런 변환을 지정하지 않은 기본 상태로 초기화 // 좌우 대칭 context.scale(-1,1); // 상하 대칭 context.scale(1,-1); context.setTransform(1, 0, 0, 1, 0, 0);
데이터 URL로 저장하기 그림을 PNG(Portable Network Graphics) 등 형식으로 저장 캔버스 비트맵 초기화 캔버스의 toDataURL() 메소드 이용 그림을 toDataURL() 메소드를 이용해서 PNG 형태의 데이터로 변환 이를 캔버스 요소의 src 속성으로 지정하면 파일로 저장이 가능 유의 사항 toDataURL()은 캔버스 컨텍스트가 아닌 캔버스 요소 객체의 메소드 캔버스 비트맵 초기화 가장 간편한 방법은 clearRect(x, y, width, height) 메소드 이용 (x, y) 위치를 기준으로 width, height의 크기의 비트맵을 초기화 var dataURL = canvas.toDataURL(); canvasDom.src = dataURL;
데이터 URL 저장 예제 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 myContext.rect(0, 0, 400, 200); myContext.fillStyle = "grey"; myContext.fill(); var text1 = "HTML5 Text Drawing!"; myContext.font = "24pt Tahoma"; myContext.fillStyle = "red"; myContext.fillText(text1, 50, 50); myContext.lineWidth = 1; myContext.font = "32pt San Serif"; myContext.strokeStyle = "blue"; myContext.strokeText("lineWidth=1", 100, 150); // Canvas 이미지를 data URL로 저장한다. 기본 형식은 PNG 포맷이다. var dataURL = canvas.toDataURL(); // dataURL을 "canvasImage" 엘리먼트의 src 속성으로 지정하여 // 마우스 오른쪽 버튼을 이용하여 PNG file로 저장될 수 있도록 한다. document.getElementById("canvasImage").src = dataURL; 캔버스 이미지 (왼쪽)과 데이터 URL 방식으로 저장한 PNG 이미지 (오른쪽) 캔버스 그리기 API
마우스로 그림 그리기 예제 캔버스 상에 마우스 이벤트를 활용해 그림 그리기 마우스 버튼을 누른 후 이동 위치를 따라 연속으로 직선을 그림 mousemove 이벤트가 발생할 때마다 lineto() 메소드 호출 <body onmousedown="start();" onmousemove="draw();" onmouseup="stop();"> <canvas id="myCanvas" width="600" height="600" style="border-style: solid;"></canvas> <script type="text/javascript"> (중간 생략) var stopped = true; function start() { e = window.event; myContext.moveTo(e.clientX-10, e.clientY-10); stopped = false; } function stop() { stopped = true; } function draw() { if (!stopped) { myContext.lineTo(e.clientX-10, e.clientY-10); ontext.stroke(); </script> </body>