1 / 27

Chapter03 캔버스 (1)

Chapter03 캔버스 (1). HTML5 Programming. Contents. 1. canvas 요소. 2. 사각형 그리기. 3. 선 그리기. 4. 다각형 그리기. 5. 원 그리기. 6. 베지에 곡선 그리기. 캔버스. 캔버스 브라우저에 그림을 그리기 위하여 놓는 것 단순히 브라우저에 그림을 표현하는 것을 넘어서 여러 가지 효과를 주고 , 텍스트를 표현하고 , 간단한 애니메이션까지 표현 가능하게 된 것 때문

robert
Download Presentation

Chapter03 캔버스 (1)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter03캔버스(1) HTML5 Programming

  2. Contents Chapter03 1. canvas 요소 2. 사각형 그리기 3. 선 그리기 4. 다각형 그리기 5. 원 그리기 6. 베지에 곡선 그리기

  3. 캔버스 Chapter03 • 캔버스 • 브라우저에 그림을 그리기 위하여 놓는 것 • 단순히 브라우저에 그림을 표현하는 것을 넘어서 여러 가지 효과를 주고, 텍스트를 표현하고, 간단한 애니메이션까지 표현 가능하게 된 것 때문 • 브라우저에 그림을 그리기 위해서는 canvas 요소를 사용하여 그림을 그릴 영역을 지정하고 실제 그림을 그리는 것은 자바스크립트를 사용 • 브라우저 지원 현황

  4. 캔버스 Chapter03 • canvas 요소 • 그림 그릴 영역 지정

  5. 프로그램 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>

  6. 캔버스 Chapter03 • 그리기 컨텍스트 생성

  7. 사각형 그리기 Chapter03 • 사각형 그리기 • 사각형을 그리기 위해서는 시작점인 x, y 좌표, 너비, 높이를 나타내는 4가지 값이 필요

  8. 사각형 그리기 Chapter03 • 사각형 그리기 관련 메서드

  9. 프로그램 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: varcanvas = 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>

  10. 선그리기 Chapter03 • 패스 • 각 도형들을 이루는 선들의 집합 • 선이나 도형 그리는 차례 • 패스를 초기화 함 • 패스를 지정함 • 지정한 패스를 그리기 메서드나 채우기 메서드를 사용하여 선이나 도형을 그림 • 지정한 패스를 닫음 • 선을 출력함

  11. 선그리기 Chapter03 • 패스 관련 메서드

  12. 현재 진행 중인 상태 표현 Chapter03 • progress 요소 • 어떠한 작업에 대하여 현재 진행 중인 상태를 나타낼 때 사용 • 속성 • 브라우저 지원 현황

  13. 프로그램 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: varcanvas = 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>

  14. 다각형 그리기 Chapter03 • 다각형 그리기 예제

  15. 프로그램 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: varcanvas = 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>

  16. 원, 호 그리기 Chapter03 • 원 그리기 • 원을 그리기 위해서는 arc() 메서드를사용 • arc() 메서드에는 시작 x, y 좌표, 반지름, 시작 각도, 종료 각도, 그리는 방향을 인자 값으로 지정 • 시작 각도와 종료 각도의 단위는 도(degree)를 사용하지 않고 라디안(radian)을 사용. 라디안 단위는 도에 Math.PI/180을 곱한 값

  17. 원, 호 그리기 Chapter03 • 원, 호 그리기 예제

  18. 프로그램 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: varcanvas = 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();

  19. 프로그램 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>

  20. 직선과 접하는 원호 그리기 Chapter03 • 직선과 접하는 원호 그리기 • arc() 메서드로 완전한 원이나 호는 그릴 수 있지만 직선과 접하는 원호는 그릴 수 없음 • 직선과 접하는 원호를 그리기 위해서는 moveTo() 메서드와arcTo() 메서드를사용 • arcTo() 메서드는보조점x, y, 종료점x, y 그리고 반지름을 인자 값으로 지정

  21. 직선과 접하는 원호 그리기 Chapter03 • 직선과 접하는 원호 그리기 예제

  22. 프로그램 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: varcanvas = 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>

  23. 베지에 곡선 그리기 Chapter03 • 베지에 곡선 그리기 • n개의 점을 기준으로 만들 수 있는 (n-1)차 곡선 • 2차 베지에 곡선은 시작점과 종료점이 존재하고 하나의 제어점이존재 • 2차 베지에 곡선을 만들기 위해서는 quadraticCurveTo() 메서드를 사용. • 하나의 제어점만을필요로 하기 때문에 제어점x, y 그리고 종료점x, y를 인수로 갖음. 시작점은 moveTo() 메서드를 사용하여 지정

  24. 베지에 곡선 그리기 Chapter03 • 2차 베지에 곡선 그리기 예제

  25. 베지에 곡선 그리기 Chapter03 • 3차 베지에 곡선 그리기 • 2개의 제어점을 가지므로 총 5개의 보조선이 생성되어 이를 기준으로 곡선이 생성 • bezierCurveTo() 메서드를 사용하고 두 개의 제어점과 한 개의 종료점을 인수로 갖음

  26. 베지에 곡선 그리기 Chapter03 • 3차 베지에 곡선 그리기 예제

  27. 프로그램 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: varcanvas = 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>

More Related