Canvas 2D Basics
Canvas 란? canvas는 자바 스크립트를 사용해서 그래픽등을 컨트롤 할 수 있는 새로운 html엘레먼트이며, 그림이나 사진, 애니메이션등의 표현이 가능하다. Canvas 좌표 : 기본 속성은 너비 300픽셀, 높이 150픽셀이지만 너비와 높이를 지정할 수 있음
Canvas 브라우저에 그림을 그리기 위한 JavaScript 객체 단순히 브라우저에 그림을 표현하는 것을 넘어서 여러 가지 효과를 주고, 텍스트를 표현하고, 간단한 애니메이션까지 표현 가능 브라우저에 그림을 그리기 위해서는 canvas 요소를 사용하여 그림을 그릴 영역을 지정하고 실제 그림을 그리는 것은 자바스크립트를 사용 브라우저 지원 현황
Canvas 시작하기 <canvas> 태그의 기본구조 <canvas id=“mycanvas” width=“200” height=“200”></canvas> var canvas = document.getElementById(“mycanvas”); var context = canvas.getContext(“2d”); <예 제> <html> <head> <title> canvas start!</title> </head> <body> <canvas id=“mycanvas” width=“450” height=“800”/> <script type=“text/javascript”> context.fillText(“hello world, hello canvas !!”, 10, 10); </script> </body> </html>
canvas 요소 그림 그릴 영역 지정
01: <!DOCTYPE html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> 캔버스 </title> 06: </head> 07: 08: <body> 09: <canvas id="canvas" width="700" height="400" 10: style="border:solid 1px #000000"> 11: canvas 사용하기 12: </canvas> 13: </body> 14: </html>
그리기 컨텍스트 생성
선그리기 그림 2. 세 가지 다른 색상의 선이 있는 캔버스 < 예 제> 그림 2. 세 가지 다른 색상의 선이 있는 캔버스 < 예 제> <html> <head> <title>Line Example</title> </head> <body> <canvas id="myCanvas" width="400" height="200"> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.beginPath(); 그림그리기 시작 context.moveTo(50, 50); 시작점 배치 context.lineTo(300,50); 끝점 배치 context.lineWidth = 10; 선의 너비 context.strokeStyle = "#0000FF"; 선의 색상 context.lineCap = "round"; 선의 끝모양 context.stroke(); 선을 칠하라 </script> </canvas> </body> </html> round square butt
Path 선이나 도형 그리는 차례 각 도형들을 이루는 선들의 집합 Path를 초기화 함 Path를 지정함 선을 출력함
패스 관련 메서드
선그리기 그림 2. 세 가지 다른 색상의 선이 있는 캔버스 < 예 제2> 그림 2. 세 가지 다른 색상의 선이 있는 캔버스 < 예 제2> <html> <head> <title>Line Example</title> </head> <body> <canvas id="myCanvas" width="400" height="200"> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.beginPath(); 그림그리기 시작 context.moveTo(50, 20); 시작점 배치 context.lineTo(20,100); 중간점 배치 context.lineTo(80,100); 끝점 배치 context.closePath(); 마지막 선에서 처음선으로 돌아감 context.lineWidth = 10; 선의 너비 context.strokeStyle = "#0000FF"; 선의 색상 context.lineCap = "round"; 선의 끝모양 context.stroke(); 선을 칠하라 </script> </canvas> </body> </html>
01: <!DOCTYPE html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> 선 그리기 </title> 06: <script type="text/javascript"> 07: function line() 08: { 09: var canvas = document.getElementById('canvas'); 10: context = canvas.getContext('2d'); 11: 12: context.moveTo(10,10); 13: context.lineTo(200,300); 14: context.stroke(); 15: 16: context.moveTo(100,10); 17: context.lineTo(300,300); 18: context.lineTo(300,100); 19: context.stroke(); 20: 21: context.moveTo(300,10); 22: context.lineTo(500,300); 23: context.lineTo(500,100); 24: context.moveTo(550,10); 25: context.lineTo(550,300); 26: context.stroke(); 27: } 28: </script> 29: </head> 31: <body onload="line();"> 32: <canvas id="canvas" width="700" height="400" 33: style="border:solid 1px #000000"> 34: canvas 사용하기 35: </canvas> 36: </body> 37: </html>
선그리기 그림 2. 세 가지 다른 색상의 선이 있는 캔버스 lineJoin miter round bevel 그림 2. 세 가지 다른 색상의 선이 있는 캔버스 lineJoin <html> <head> <title>Line Example</title> </head> <body> <canvas id="myCanvas" width=“800" height=“800"> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(20, 200); context.lineTo(200,200); context.lineTo(200,20); context.lineWidth = 50; context.lineJoin = “bevel"; 라인 연결부위의 처리모양 context.stroke(); </script> </canvas> </body> </html> miter round bevel
선 스타일 지정하기 선을 그리는 데 있어서 선 두께, 선 끝부분 스타일, 선이 꺾이는 부분 스타일, 선 색 등은 특정 속성에 값을 지정함으로써 다양한 변화를 줄 수 있음
선 스타일 지정하기
선 색 지정하기 strokeStyle 속성을 사용함 속성 값은 색상 이름, 색상 코드, RGB, RGBA 형식을 지정할 수 있음
선 색 지정하기
선의 끝부분 스타일 지정 lineCap 속성을 사용함 두 개 이상의 lineTo() 메서드를 사용하여 선을 그리는 경우 선이 꺾이는 부분의 모양에 대해서는 lineJoin 속성을 사용
선의 끝부분 스타일 지정
01: <!DOCTYPE html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> 선 그리기 </title> 06: <script type="text/javascript"> 07: function line() 08: { 09: var canvas = document.getElementById('canvas'); 10: context = canvas.getContext('2d'); 11: 12: context.beginPath(); 13: context.moveTo(10,50); 14: context.lineTo(200,350); 15: context.lineWidth = 5; 16: context.strokeStyle = 'blue'; 17: context.stroke(); 18: 19: context.beginPath(); 20: context.moveTo(100,50); 21: context.lineTo(300,350); 22: context.lineTo(300,100); 23: context.lineWidth = 10; 24: context.strokeStyle = 'rgb(255,0,0)'; 25: context.stroke();
27: context.beginPath(); 28: context.moveTo(300,50); 29: context.lineTo(500,350); 30: context.lineTo(500,100); 31: context.moveTo(550,50); 32: context.lineTo(550,350); 33: context.lineWidth = 25; 34: context.strokeStyle = '#00FF00'; 35: context.lineCap = 'round'; 36: context.lineJoin = 'butt'; 37: context.stroke(); 38: } 39: </script> 40: </head> 41: 42: <body onload="line();"> 43: <canvas id="canvas" width="700" height="400" 44: style="border:solid 1px #000000"> 45: canvas 사용하기 46: </canvas> 47: </body> 48: </html>
다각형 그리기 예제
01: <!DOCTYPE html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> 다각형 그리기 </title> 06: <script type="text/javascript"> 07: function polygon() 08: { 09: var canvas = document.getElementById('canvas'); 10: context = canvas.getContext('2d'); 11: 12: context.beginPath(); 13: context.moveTo(150,10); 14: context.lineTo(80,350); 15: context.lineTo(350,350); 16: context.lineTo(280,10); 17: context.closePath(); 18: context.stroke(); 19: 20: context.beginPath(); 21: context.moveTo(500,10); 22: context.lineTo(350,150); 23: context.lineTo(430,350); 24: context.lineTo(570,350); 25: context.lineTo(650,150); 26: context.closePath(); 27: context.fill(); 28: } 29: </script> 30: </head> 32: <body onload="polygon();"> 33: <canvas id="canvas" width="700" height="400" 34: style="border:solid 1px #000000"> 35: canvas 사용하기 36: </canvas> 37: </body> 38: </html>
커브 그리기 원/ 반원 그리기 context.arc(centerX, centerY, radius, startingAngle, endingAngle,antiClockwise); 원 그리기 context.arc(centerX, centerY, radius, 0, 2*Math.PI,antiClockwise); 2. 반원 그리기 context.arc(centerX,centerY,radius,startingAngle,startingAngle+Math.PI ,false); <예 제>
원 그리기 원을 그리기 위해서는 arc() 메서드를 사용 arc() 메서드에는 시작 x, y 좌표, 반지름, 시작 각도, 종료 각도, 그리는 방향을 인자 값으로 지정 시작 각도와 종료 각도의 단위는 도(degree)를 사용하지 않고 라디안(radian)을 사용. 라디안 단위는 도에 Math.PI/180을 곱한 값
원, 호 그리기 예제
01: <!DOCTYPE html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> 원 그리기 </title> 06: <script type="text/javascript"> 07: function arc() 08: { 09: var canvas = document.getElementById('canvas'); 10: context = canvas.getContext('2d'); 11: 12: context.beginPath(); 13: context.arc(120,120,100,0,360*Math.PI/180,false); 14: context.stroke(); 15: 16: context.beginPath(); 17: context.arc(350,120,100,90*Math.PI/180,360*Math.PI/180,false); 18: context.stroke(); 19: 20: context.beginPath(); 21: context.arc(350,120,100,90*Math.PI/180,360*Math.PI/180,true); 22: context.fill(); 23: 24: context.beginPath(); 25: context.moveTo(570,120); 26: context.arc(570,120,100,90*Math.PI/180,360*Math.PI/180,false); 27: context.closePath(); 28: context.stroke();
30: context.beginPath(); 31: context.moveTo(570,120); 32: context.arc(570,120,100,90*Math.PI/180,360*Math.PI/180,true); 33: context.closePath(); 34: context.fill(); 35: } 36: </script> 37: </head> 38: 39: <body onload="arc();"> 40: <canvas id="canvas" width="700" height="400" 41: style="border:solid 1px #000000"> 42: canvas 사용하기 43: </canvas> 44: </body> 45: </html>
커브그리기 2차 곡선 그리기 context.moveTo(x, y); context.quadraticCurveTo(controlX, controlY, endX, endY); <예 제 1> <예 제 2> quadraticCurveTo 메서드 동작원리 (출처 : html5canvastutorials) context point로 moveTo 메서드를 사용하여 point를 이동 후 control point 좌표를 quadraticCurveTo 메서드 인자 controlX, controlY에 지정한다. endX, endY 인자는 곡선의 끝 점을 지정한다.
베지에 곡선 그리기 n개의 점을 기준으로 만들 수 있는 (n-1)차 곡선 2차 베지에 곡선은 시작점과 종료점이 존재하고 하나의 제어점이 존재 2차 베지에 곡선을 만들기 위해서는 quadraticCurveTo() 메서드를 사용. 하나의 제어점만을 필요로 하기 때문에 제어점x, y 그리고 종료점x, y를 인수로 갖음. 시작점은 moveTo() 메서드를 사용하여 지정 http://comedudb.knue.ac.kr/~tykim/Myhome/Plnote/Canvas/Examples/bezier.html
2차 베지에 곡선 그리기 예제
커브 그리기 3차 곡선 그리기 context.moveTo(x, y); context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY); <예 제 >
3차 베지에 곡선 그리기 2개의 제어점을 가지므로 총 5개의 보조선이 생성되어 이를 기준으로 곡선이 생성 bezierCurveTo() 메서드를 사용하고 두 개의 제어점과 한 개의 종료점을 인수로 갖음
3차 베지에 곡선 그리기 예제
01: <!DOCTYPE html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> 베지에 곡선 그리기 </title> 06: <script type="text/javascript"> 07: function curve() 08: { 09: var canvas = document.getElementById('canvas'); 10: context = canvas.getContext('2d'); 11: 12: context.beginPath(); 13: context.moveTo(50,50); 14: context.quadraticCurveTo(200,350,350,50); 15: context.stroke(); 16: 17: context.beginPath(); 18: context.moveTo(350,350); 19: context.bezierCurveTo(300,50,600,100,650,350); 20: context.fill(); 21: } 22: </script> 23: </head> 24: 25: <body onload="curve();"> 26: <canvas id="canvas" width="700" height="400" 27: style="border:solid 1px #000000"> 28: canvas 사용하기 29: </canvas> 30: </body> 31: </html>
복합라인 그리기 <예 제> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(100, 20); context.lineTo(200, 160); // line 1 context.quadraticCurveTo(230, 200, 250, 120); // quadratic curve context.bezierCurveTo(290, -40, 300, 200, 400, 150); // bezier curve context.lineTo(500, 90); // line 2 context.lineWidth = 5; context.strokeStyle = "#0000ff"; context.stroke();
원호 그리기 직선과 곡선 그리고 직선을 연결하여 둥근 모서리 만들기 context.arcTo(x, y, x1, y1, radius) context.moveTo(0, 100); context.arcTo(25, 25, 100, 100, 25); <예 제>
직선과 접하는 원호 그리기 arc() 메서드로 완전한 원이나 호는 그릴 수 있지만 직선과 접하는 원호는 그릴 수 없음 직선과 접하는 원호를 그리기 위해서는 moveTo() 메서드와 arcTo() 메서드를 사용 arcTo() 메서드는 보조점 x, y, 종료점 x, y 그리고 반지름을 인자 값으로 지정
직선과 접하는 원호 그리기 예제
01: <!DOCTYPE html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> 원호 그리기 </title> 06: <script type="text/javascript"> 07: function arcTo() 08: { 09: var canvas = document.getElementById('canvas'); 10: context = canvas.getContext('2d'); 11: 12: context.beginPath(); 13: context.moveTo(50,50); 14: context.arcTo(200,400,300,10,50); 15: context.stroke(); 16: 17: context.beginPath(); 18: context.moveTo(600,350); 19: context.arcTo(400,0,300,400,100); 20: context.fill(); 21: } 22: </script> 23: </head> 24: 25: <body onload="arcTo();"> 26: <canvas id="canvas" width="700" height="400" 27: style="border:solid 1px #000000"> 28: canvas 사용하기 29: </canvas> 30: </body> 31: </html>