Chapter03 캔버스(1) HTML5 Programming
Contents 1. canvas 요소 2. 사각형 그리기 3. 선 그리기 4. 다각형 그리기 5. 원 그리기 Chapter03 1. canvas 요소 2. 사각형 그리기 3. 선 그리기 4. 다각형 그리기 5. 원 그리기 6. 베지에 곡선 그리기 캔버스(1)
캔버스 캔버스 브라우저에 그림을 그리기 위하여 놓는 것 Chapter03 캔버스 브라우저에 그림을 그리기 위하여 놓는 것 단순히 브라우저에 그림을 표현하는 것을 넘어서 여러 가지 효과를 주고, 텍스트를 표현하고, 간단한 애니메이션까지 표현 가능하게 된 것 때문 브라우저에 그림을 그리기 위해서는 canvas 요소를 사용하여 그림을 그릴 영역을 지정하고 실제 그림을 그리는 것은 자바스크립트를 사용 브라우저 지원 현황 캔버스(1)
캔버스 Chapter03 canvas 요소 그림 그릴 영역 지정 캔버스(1)
프로그램 3-1 Chapter03 01: <!DOCTYPE html> 02: <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> 캔버스(1)
캔버스 Chapter03 그리기 컨텍스트 생성 캔버스(1)
사각형 그리기 사각형 그리기 사각형을 그리기 위해서는 시작점인 x, y 좌표, 너비, 높이를 나타내는 4가지 값이 필요 Chapter03 사각형 그리기 사각형을 그리기 위해서는 시작점인 x, y 좌표, 너비, 높이를 나타내는 4가지 값이 필요 캔버스(1)
사각형 그리기 Chapter03 사각형 그리기 관련 메서드 캔버스(1)
프로그램 3-2 Chapter03 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> 사각형 그리기 </title> 06: <script type="text/javascript"> 07: function rect() 08: { 09: var canvas = document.getElementById('canvas'); 10: context = canvas.getContext('2d'); 11: 12: context.strokeRect(10,10,200,200); 13: context.fillRect(220,10,200,200); 14: 15: context.fillRect(430,10,200,200); 16: context.clearRect(500,50,100,100); 17: } 18: </script> 19: </head> 20: 21: <body onload="rect();"> 22: <canvas id="canvas" width="700" height="400" 23: style="border:solid 1px #000000"> 24: canvas 사용하기 25: </canvas> 26: </body> 27: </html> 캔버스(1)
선그리기 패스 선이나 도형 그리는 차례 각 도형들을 이루는 선들의 집합 패스를 초기화 함 패스를 지정함 Chapter03 패스 각 도형들을 이루는 선들의 집합 선이나 도형 그리는 차례 패스를 초기화 함 패스를 지정함 지정한 패스를 그리기 메서드나 채우기 메서드를 사용하여 선이나 도형을 그림 지정한 패스를 닫음 선을 출력함 캔버스(1)
선그리기 Chapter03 패스 관련 메서드 캔버스(1)
현재 진행 중인 상태 표현 progress 요소 속성 브라우저 지원 현황 Chapter03 progress 요소 어떠한 작업에 대하여 현재 진행 중인 상태를 나타낼 때 사용 속성 브라우저 지원 현황 캔버스(1)
프로그램 3-3 Chapter03 01: <!DOCTYPE html> 02: <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> 캔버스(1)
다각형 그리기 Chapter03 다각형 그리기 예제 캔버스(1)
프로그램 3-4 Chapter03 01: <!DOCTYPE html> 02: <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> 캔버스(1)
원, 호 그리기 원 그리기 원을 그리기 위해서는 arc() 메서드를 사용 Chapter03 원 그리기 원을 그리기 위해서는 arc() 메서드를 사용 arc() 메서드에는 시작 x, y 좌표, 반지름, 시작 각도, 종료 각도, 그리는 방향을 인자 값으로 지정 시작 각도와 종료 각도의 단위는 도(degree)를 사용하지 않고 라디안(radian)을 사용. 라디안 단위는 도에 Math.PI/180을 곱한 값 캔버스(1)
원, 호 그리기 Chapter03 원, 호 그리기 예제 캔버스(1)
프로그램 3-5 Chapter03 01: <!DOCTYPE html> 02: <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(); 캔버스(1)
프로그램 3-5 Chapter03 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> 캔버스(1)
직선과 접하는 원호 그리기 직선과 접하는 원호 그리기 Chapter03 직선과 접하는 원호 그리기 arc() 메서드로 완전한 원이나 호는 그릴 수 있지만 직선과 접하는 원호는 그릴 수 없음 직선과 접하는 원호를 그리기 위해서는 moveTo() 메서드와 arcTo() 메서드를 사용 arcTo() 메서드는 보조점 x, y, 종료점 x, y 그리고 반지름을 인자 값으로 지정 캔버스(1)
직선과 접하는 원호 그리기 Chapter03 직선과 접하는 원호 그리기 예제 캔버스(1)
프로그램 3-6 Chapter03 01: <!DOCTYPE html> 02: <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> 캔버스(1)
베지에 곡선 그리기 베지에 곡선 그리기 n개의 점을 기준으로 만들 수 있는 (n-1)차 곡선 Chapter03 베지에 곡선 그리기 n개의 점을 기준으로 만들 수 있는 (n-1)차 곡선 2차 베지에 곡선은 시작점과 종료점이 존재하고 하나의 제어점이 존재 2차 베지에 곡선을 만들기 위해서는 quadraticCurveTo() 메서드를 사용. 하나의 제어점만을 필요로 하기 때문에 제어점x, y 그리고 종료점x, y를 인수로 갖음. 시작점은 moveTo() 메서드를 사용하여 지정 캔버스(1)
베지에 곡선 그리기 Chapter03 2차 베지에 곡선 그리기 예제 캔버스(1)
베지에 곡선 그리기 3차 베지에 곡선 그리기 2개의 제어점을 가지므로 총 5개의 보조선이 생성되어 이를 기준으로 곡선이 생성 Chapter03 3차 베지에 곡선 그리기 2개의 제어점을 가지므로 총 5개의 보조선이 생성되어 이를 기준으로 곡선이 생성 bezierCurveTo() 메서드를 사용하고 두 개의 제어점과 한 개의 종료점을 인수로 갖음 캔버스(1)
베지에 곡선 그리기 Chapter03 3차 베지에 곡선 그리기 예제 캔버스(1)
프로그램 3-7 Chapter03 01: <!DOCTYPE html> 02: <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> 캔버스(1)