HTML5 API - Canvas - 1

HTML5 2012. 5. 7. 16:55


HTML5 API 기술 중 가장 많은 설명과 예제가 필요한 기능을 하나 꼽으라면 단연 이번 시간에 설명하려는 Canvas API를 꼽을 수 있을 것입니다. 


그만큼 장기간의 학습 시간이 필요한 기술이며, 기존 플래쉬와 같은 그래픽 프로그램에 익숙하지 않은 개발자는 더 욱 오랜 시간에 걸쳐 학습해야 하기 때문입니다.(저 역시도 그래픽과 관련된 프로그램을 전문적으로 다루고 있지 않아 상황 별 좋은 소스를 보여드리긴 힘들꺼 같습니다.ㅠㅠ;;;)



아래는 API에 대한 설명과 관련 예제를 정리한 내용입니다.





1. HTMLCanvasElement.getContext(id): canvas context객체를 생성한다.


id: 반환 될 컨텍스트 객체를 구별하는 아이디 문자열('2d', '3d(현재 미지원)')


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>Canvas</title>
  5. </head>
  6. <body>
  7. <script type="text/javascript">
  8. //<![CDATA[
  9.  
  10.     function getContext() {
  11.  
  12.         var cvs = document.getElementById('canvas_test')
  13.           , ctx = cvs.getContext('2d');
  14.  
  15.  
  16.         ctx.beginPath();
  17.         ctx.rect(10, 10, 85, 85);
  18.  
  19.         ctx.rect(105, 10, 85, 85);
  20.         ctx.stroke();
  21.     }
  22.  
  23.  
  24.  
  25.     function bind(elem, type, handler, capture) {
  26.         type = typeof type === 'string' && type || '';
  27.         handler = handler || function () { ; };
  28.         capture = capture || false;
  29.  
  30.         if (elem.addEventListener) {
  31.             elem.addEventListener(type, handler, capture);
  32.         }
  33.         else if (elem.attachEvent) {
  34.             elem.attachEvent('on' + type, handler);
  35.         }
  36.  
  37.         return elem;
  38.     };
  39.  
  40.  
  41.     bind(window, 'load', function () {
  42.         getContext();
  43.     });
  44.  
  45.  
  46. //]]>
  47. </script>
  48. <canvas id="canvas_test" width="200" height="200" style="border:black 1px solid"></canvas>
  49. </body>
  50. </html>




실행결과:








2. CanvasRenderingContext2D.fillStyle: 경로(Path)를 통해 그려지는 도형 내부에 채워지는 스타일을 지정한다.


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>Canvas</title>
  5. </head>
  6. <body>
  7. <script type="text/javascript">
  8. //<![CDATA[
  9.  
  10.  
  11.     function fillStyle() {
  12.  
  13.         var cvs = document.getElementById('canvas_test')
  14.           , ctx = cvs.getContext('2d');
  15.  
  16.         ctx.beginPath();
  17.         ctx.moveTo(10, 10);
  18.         ctx.lineTo(90, 10);
  19.         ctx.lineTo(90, 90);
  20.         ctx.closePath();
  21.  
  22.         // 스타일 지정
  23.         ctx.fillStyle = 'red';
  24.        
  25.         ctx.fill();
  26.         ctx.stroke();
  27.     }
  28.  
  29.  
  30.  
  31.     function bind(elem, type, handler, capture) {
  32.         type = typeof type === 'string' && type || '';
  33.         handler = handler || function () { ; };
  34.         capture = capture || false;
  35.  
  36.         if (elem.addEventListener) {
  37.             elem.addEventListener(type, handler, capture);
  38.         }
  39.         else if (elem.attachEvent) {
  40.             elem.attachEvent('on' + type, handler);
  41.         }
  42.  
  43.         return elem;
  44.     };
  45.  
  46.  
  47.     bind(window, 'load', function () {
  48.         fillStyle();
  49.     });
  50.  
  51.  
  52. //]]>
  53. </script>
  54. <canvas id="canvas_test" width="200" height="200" style="border:black 1px solid"></canvas>
  55. </body>
  56. </html>




실행결과:








3. CanvasRenderingContext2D.fillRect(x, y, w, h): 사각영역에 색을 칠한다.


x: 영역의 왼쪽 위 가로 좌표

y: 영역의 왼쪽 위 세로 좌표

w: 가로 사이즈

h: 세로 사이즈


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>Canvas</title>
  5. </head>
  6. <body>
  7. <script type="text/javascript">
  8. //<![CDATA[
  9.  
  10.  
  11.     function fillRect() {
  12.  
  13.         var cvs = document.getElementById('canvas_test')
  14.           , ctx = cvs.getContext('2d');
  15.  
  16.         // 스타일 지정
  17.         ctx.fillStyle = 'red';
  18.         ctx.fillRect(10, 10, 90, 90);
  19.     }
  20.  
  21.  
  22.  
  23.     function bind(elem, type, handler, capture) {
  24.         type = typeof type === 'string' && type || '';
  25.         handler = handler || function () { ; };
  26.         capture = capture || false;
  27.  
  28.         if (elem.addEventListener) {
  29.             elem.addEventListener(type, handler, capture);
  30.         }
  31.         else if (elem.attachEvent) {
  32.             elem.attachEvent('on' + type, handler);
  33.         }
  34.  
  35.         return elem;
  36.     };
  37.  
  38.  
  39.     bind(window, 'load', function () {
  40.         fillStyle();
  41.     });
  42.  
  43.  
  44. //]]>
  45. </script>
  46. <canvas id="canvas_test" width="200" height="200" style="border:black 1px solid"></canvas>
  47. </body>
  48. </html>




실행결과: 







4. CanvasRenderingContext2D.clearRect(x, y, w, h): 사각영역을 배경으로 채워 삭제된 효과를 준다.


x: 영역의 왼쪽 위 가로 좌표

y: 영역의 왼쪽 위 세로 좌표

w: 가로 사이즈

h: 세로 사이즈


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>Canvas</title>
  5. </head>
  6. <body>
  7. <script type="text/javascript">
  8. //<![CDATA[
  9.  
  10.  
  11.     function clearRect() {
  12.  
  13.         var cvs = document.getElementById('canvas_test')
  14.           , ctx = cvs.getContext('2d');
  15.  
  16.         // 스타일 지정
  17.         ctx.fillStyle = 'red';
  18.         ctx.fillRect(10, 10, 90, 90);
  19.        
  20.         // 클리어
  21.         ctx.clearRect(15, 15, 80, 80);
  22.     }
  23.  
  24.  
  25.  
  26.     function bind(elem, type, handler, capture) {
  27.         type = typeof type === 'string' && type || '';
  28.         handler = handler || function () { ; };
  29.         capture = capture || false;
  30.  
  31.         if (elem.addEventListener) {
  32.             elem.addEventListener(type, handler, capture);
  33.         }
  34.         else if (elem.attachEvent) {
  35.             elem.attachEvent('on' + type, handler);
  36.         }
  37.  
  38.         return elem;
  39.     };
  40.  
  41.  
  42.     bind(window, 'load', function () {
  43.         clearRect();
  44.     });
  45.  
  46.  
  47. //]]>
  48. </script>
  49. <canvas id="canvas_test" width="200" height="200" style="border:black 1px solid"></canvas>
  50. </body>
  51. </html>




실행결과:







5. CanvasRenderingContext2D.strokeRect(x, y, w, h): 사각영역의 테두리를 그린다.


x: 영역의 왼쪽 위 가로 좌표

y: 영역의 왼쪽 위 세로 좌표

w: 가로 사이즈

h: 세로 사이즈


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>Canvas</title>
  5. </head>
  6. <body>
  7. <script type="text/javascript">
  8. //<![CDATA[
  9.  
  10.  
  11.     function strokeRect() {
  12.  
  13.         var cvs = document.getElementById('canvas_test')
  14.           , ctx = cvs.getContext('2d');
  15.  
  16.         ctx.strokeRect(10, 10, 90, 90);
  17.     }
  18.  
  19.  
  20.  
  21.     function bind(elem, type, handler, capture) {
  22.         type = typeof type === 'string' && type || '';
  23.         handler = handler || function () { ; };
  24.         capture = capture || false;
  25.  
  26.         if (elem.addEventListener) {
  27.             elem.addEventListener(type, handler, capture);
  28.         }
  29.         else if (elem.attachEvent) {
  30.             elem.attachEvent('on' + type, handler);
  31.         }
  32.  
  33.         return elem;
  34.     };
  35.  
  36.  
  37.     bind(window, 'load', function () {
  38.         strokeRect();
  39.     });
  40.  
  41.  
  42. //]]>
  43. </script>
  44. <canvas id="canvas_test" width="200" height="200" style="border:black 1px solid"></canvas>
  45. </body>
  46. </html>




실행결과:







6. CanvasRenderingContext2D.strokeStyle: 테두리 스타일을 지정한다.


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>Canvas</title>
  5. </head>
  6. <body>
  7. <script type="text/javascript">
  8. //<![CDATA[
  9.  
  10.  
  11.     function strokeStyle() {
  12.  
  13.         var cvs = document.getElementById('canvas_test')
  14.           , ctx = cvs.getContext('2d');
  15.        
  16.         // 스타일 지정
  17.         ctx.strokeStyle = 'red';
  18.  
  19.         ctx.strokeRect(10, 10, 90, 90);
  20.     }
  21.  
  22.  
  23.  
  24.     function bind(elem, type, handler, capture) {
  25.         type = typeof type === 'string' && type || '';
  26.         handler = handler || function () { ; };
  27.         capture = capture || false;
  28.  
  29.         if (elem.addEventListener) {
  30.             elem.addEventListener(type, handler, capture);
  31.         }
  32.         else if (elem.attachEvent) {
  33.             elem.attachEvent('on' + type, handler);
  34.         }
  35.  
  36.         return elem;
  37.     };
  38.  
  39.  
  40.     bind(window, 'load', function () {
  41.         strokeStyle();
  42.     });
  43.  
  44.  
  45. //]]>
  46. </script>
  47. <canvas id="canvas_test" width="200" height="200" style="border:black 1px solid"></canvas>
  48. </body>
  49. </html>




실행결과:







7. CanvasRenderingContext2D.beginPath(): 그리는 경로의 시작에 반드시 붙어준다.


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>Canvas</title>
  5. </head>
  6. <body>
  7. <script type="text/javascript">
  8. //<![CDATA[
  9.  
  10.  
  11.     function beginPath() {
  12.  
  13.         var cvs = document.getElementById('canvas_test')
  14.           , ctx = cvs.getContext('2d');
  15.        
  16.         // 경로에 시작을 알려준다.
  17.         ctx.beginPath();
  18.  
  19.         ctx.moveTo(10, 10);
  20.         ctx.lineTo(90, 10);
  21.  
  22.         ctx.stroke();
  23.  
  24.         // 경로에 마지막을 알려준다.
  25.         ctx.closePath();
  26.  
  27.  
  28.         // 새롭게 경로를 시작한다.
  29.         ctx.beginPath();
  30.  
  31.         ctx.moveTo(190, 10);
  32.         ctx.lineTo(100, 10);
  33.         ctx.stroke();
  34.  
  35.         ctx.closePath();
  36.     }
  37.  
  38.  
  39.  
  40.     function bind(elem, type, handler, capture) {
  41.         type = typeof type === 'string' && type || '';
  42.         handler = handler || function () { ; };
  43.         capture = capture || false;
  44.  
  45.         if (elem.addEventListener) {
  46.             elem.addEventListener(type, handler, capture);
  47.         }
  48.         else if (elem.attachEvent) {
  49.             elem.attachEvent('on' + type, handler);
  50.         }
  51.  
  52.         return elem;
  53.     };
  54.  
  55.  
  56.     bind(window, 'load', function () {
  57.         beginPath();
  58.     });
  59.  
  60.  
  61. //]]>
  62. </script>
  63. <canvas id="canvas_test" width="200" height="200" style="border:black 1px solid"></canvas>
  64. </body>
  65. </html>




실행결과:








8. CanvasRenderingContext2D.closePath(): 


1. 그리는 경로를 종료한다.

2. 마지막 지점에서 시작점까지 직선을 그린다.


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>Canvas</title>
  5. </head>
  6. <body>
  7. <script type="text/javascript">
  8. //<![CDATA[
  9.  
  10.  
  11.     function closePath() {
  12.  
  13.         var cvs = document.getElementById('canvas_test')
  14.           , ctx = cvs.getContext('2d');
  15.        
  16.         // 경로에 시작을 알려준다.
  17.         ctx.beginPath();
  18.  
  19.         ctx.moveTo(10, 10);
  20.         ctx.lineTo(90, 10);
  21.         ctx.lineTo(10, 90);
  22.  
  23.         // 마지막 지점에서 시작점까지 직선을 그린다.
  24.         ctx.closePath();
  25.  
  26.         ctx.stroke();
  27.        
  28.     }
  29.  
  30.  
  31.  
  32.     function bind(elem, type, handler, capture) {
  33.         type = typeof type === 'string' && type || '';
  34.         handler = handler || function () { ; };
  35.         capture = capture || false;
  36.  
  37.         if (elem.addEventListener) {
  38.             elem.addEventListener(type, handler, capture);
  39.         }
  40.         else if (elem.attachEvent) {
  41.             elem.attachEvent('on' + type, handler);
  42.         }
  43.  
  44.         return elem;
  45.     };
  46.  
  47.  
  48.     bind(window, 'load', function () {
  49.         closePath();
  50.     });
  51.  
  52.  
  53. //]]>
  54. </script>
  55. <canvas id="canvas_test" width="200" height="200" style="border:black 1px solid"></canvas>
  56. </body>
  57. </html>




실행결과: 







9. CanvasRenderingContext2D.moveTo(x, y): 시작 포인트를 이동 시킨다.


x: 시작점의 가로 좌표

y: 시작점의 세로 좌표


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>Canvas</title>
  5. </head>
  6. <body>
  7. <script type="text/javascript">
  8. //<![CDATA[
  9.  
  10.  
  11.     function moveTo() {
  12.  
  13.         var cvs = document.getElementById('canvas_test')
  14.           , ctx = cvs.getContext('2d');
  15.        
  16.         // 경로에 시작을 알려준다.
  17.         ctx.beginPath();
  18.  
  19.         ctx.moveTo(10, 10);
  20.         ctx.moveTo(20, 20);
  21.  
  22.         // 최종 시작점은 x: 30, y: 30 좌표 지점에서 시작된다.
  23.         ctx.moveTo(30, 30);
  24.  
  25.         ctx.lineTo(90, 30);
  26.  
  27.         // 마지막 지점에서 시작점까지 직선을 그린다.
  28.         ctx.closePath();
  29.  
  30.         ctx.stroke();
  31.        
  32.     }
  33.  
  34.  
  35.  
  36.     function bind(elem, type, handler, capture) {
  37.         type = typeof type === 'string' && type || '';
  38.         handler = handler || function () { ; };
  39.         capture = capture || false;
  40.  
  41.         if (elem.addEventListener) {
  42.             elem.addEventListener(type, handler, capture);
  43.         }
  44.         else if (elem.attachEvent) {
  45.             elem.attachEvent('on' + type, handler);
  46.         }
  47.  
  48.         return elem;
  49.     };
  50.  
  51.  
  52.     bind(window, 'load', function () {
  53.         moveTo();
  54.     });
  55.  
  56.  
  57. //]]>
  58. </script>
  59. <canvas id="canvas_test" width="200" height="200" style="border:black 1px solid"></canvas>
  60. </body>
  61. </html>




실행결과:







10. CanvasRenderingContext2D.lineTo(x, y): 시작점부터 x, y 위치까지 직선을 그린다.


x: 직선의 종료 가로 좌표

y: 직선의 종료 세로 좌표


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>Canvas</title>
  5. </head>
  6. <body>
  7. <script type="text/javascript">
  8. //<![CDATA[
  9.  
  10.  
  11.     function lineTo() {
  12.  
  13.         var cvs = document.getElementById('canvas_test')
  14.           , ctx = cvs.getContext('2d');
  15.        
  16.         ctx.beginPath();
  17.  
  18.         ctx.moveTo(10, 10);
  19.         ctx.moveTo(20, 20);
  20.  
  21.         ctx.moveTo(30, 30);
  22.  
  23.         // 시작점부터 x, y 위치까지 직선을 그린다.
  24.         ctx.lineTo(90, 30);
  25.  
  26.         ctx.closePath();
  27.  
  28.         ctx.stroke();
  29.        
  30.     }
  31.  
  32.  
  33.  
  34.     function bind(elem, type, handler, capture) {
  35.         type = typeof type === 'string' && type || '';
  36.         handler = handler || function () { ; };
  37.         capture = capture || false;
  38.  
  39.         if (elem.addEventListener) {
  40.             elem.addEventListener(type, handler, capture);
  41.         }
  42.         else if (elem.attachEvent) {
  43.             elem.attachEvent('on' + type, handler);
  44.         }
  45.  
  46.         return elem;
  47.     };
  48.  
  49.  
  50.     bind(window, 'load', function () {
  51.         lineTo();
  52.     });
  53.  
  54.  
  55. //]]>
  56. </script>
  57. <canvas id="canvas_test" width="200" height="200" style="border:black 1px solid"></canvas>
  58. </body>
  59. </html>




실행결과:








11. CanvasRenderingContext2D.rect(x, y, w, h): 경로가 지정된 사각형을 그린다.


x: 사각 영역의 왼쪽 위 가로 좌표

y: 사각 영역의 왼쪽 위 세로 좌표

w: 사각 영역의 가로 폭

h: 사각 영역의 세로 폭


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>Canvas</title>
  5. </head>
  6. <body>
  7. <script type="text/javascript">
  8. //<![CDATA[
  9.  
  10.  
  11.     function rect() {
  12.  
  13.         var cvs = document.getElementById('canvas_test')
  14.           , ctx = cvs.getContext('2d');
  15.  
  16.         // rect() 메서드는 이전에 배운 fillRect() 메서드와는 달리 경로가 지정된 도형의 외각선을 그리는 stroke() 메소드를 사용해야한다.
  17.         ctx.beginPath();
  18.  
  19.         ctx.rect(10, 10, 90, 90);
  20.         ctx.stroke();
  21.  
  22.         ctx.closePath();
  23.     }
  24.  
  25.  
  26.  
  27.     function bind(elem, type, handler, capture) {
  28.         type = typeof type === 'string' && type || '';
  29.         handler = handler || function () { ; };
  30.         capture = capture || false;
  31.  
  32.         if (elem.addEventListener) {
  33.             elem.addEventListener(type, handler, capture);
  34.         }
  35.         else if (elem.attachEvent) {
  36.             elem.attachEvent('on' + type, handler);
  37.         }
  38.  
  39.         return elem;
  40.     };
  41.  
  42.  
  43.     bind(window, 'load', function () {
  44.         rect();
  45.     });
  46.  
  47.  
  48. //]]>
  49. </script>
  50. <canvas id="canvas_test" width="200" height="200" style="border:black 1px solid"></canvas>
  51. </body>
  52. </html>




실행결과:







12. CanvasRenderingContext2D.arc(x, y, radius, startAngle, endAngle, anticlockwise): 원이나 호를 그린다.


x: 호가 시작되는 가로 좌표

y: 호가 시작되는 세로 좌표

radius : 호의 반지름

startAngle: 호의 시작 각도 라디안(radian) 단위

endAngle: 호의 종료 각도 라디안(radian) 단위

anticlockwise: 호를 그리는 반향이 반시계 반향 일 때 true



  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>Canvas</title>
  5. </head>
  6. <body>
  7. <script type="text/javascript">
  8. //<![CDATA[
  9.  
  10.  
  11.     function arc() {
  12.  
  13.         var cvs = document.getElementById('canvas_test')
  14.           , ctx = cvs.getContext('2d');
  15.  
  16.  
  17.         ctx.beginPath();
  18.  
  19.         ctx.arc(40, 120, 40, 0, (Math.PI / 180) * -90, false);
  20.         ctx.stroke();
  21.  
  22.         ctx.closePath();
  23.        
  24.         ctx.beginPath();
  25.  
  26.         ctx.arc(40, 40, 40, (Math.PI / 180) * 90, 0, false);
  27.         ctx.stroke();
  28.  
  29.         ctx.closePath();
  30.  
  31.         // 원둘레
  32.         ctx.beginPath();
  33.  
  34.         ctx.arc(40, 160, 40, 0, (Math.PI * 2), false);
  35.         ctx.stroke();
  36.  
  37.         ctx.closePath();
  38.     }
  39.  
  40.  
  41.  
  42.     function bind(elem, type, handler, capture) {
  43.         type = typeof type === 'string' && type || '';
  44.         handler = handler || function () { ; };
  45.         capture = capture || false;
  46.  
  47.         if (elem.addEventListener) {
  48.             elem.addEventListener(type, handler, capture);
  49.         }
  50.         else if (elem.attachEvent) {
  51.             elem.attachEvent('on' + type, handler);
  52.         }
  53.  
  54.         return elem;
  55.     };
  56.  
  57.  
  58.     bind(window, 'load', function () {
  59.         arc();
  60.     });
  61.  
  62.  
  63. //]]>
  64. </script>
  65. <canvas id="canvas_test" width="200" height="200" style="border:black 1px solid"></canvas>
  66. </body>
  67. </html>




실행결과:








13. CanvasRenderingContext2D.arcTo(x1, y1, x2, y2, radius): 두 개의 접점을 연결하는 원호를 그린다.


마지막으로 지정된  현재 좌표(x0,y0)에서 (x1, y1)을 연결하는 직선, 그리고 (x1, y1)과 (x2, y2)를 연결하는 가상의 직선에 동시에 접하는 반지름(radius)의 가상의 원을 기준으로 호를 그린다.


x1: 호가 인접하는 첫번째 직선의 종료 가로 좌표

y1: 호가 인접하는 첫번째 직선의 종료 세로 좌표

x2: 호가 인접하는 두번째 직선의 종료 가로 좌표

y2: 호가 인접하는 두번째 직선의 종료 세로 좌표

radius : 호의 반지름



  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>Canvas</title>
  5. </head>
  6. <body>
  7. <script type="text/javascript">
  8. //<![CDATA[
  9.  
  10.  
  11.     function arcTo() {
  12.  
  13.         var cvs = document.getElementById('canvas_test')
  14.           , ctx = cvs.getContext('2d');
  15.  
  16.        
  17.         // 원둘레
  18.         ctx.beginPath();
  19.         ctx.moveTo(100, 0);
  20.         ctx.arcTo(200, 0, 200, 200, 100);
  21.        
  22.         //ctx.closePath();
  23.         ctx.strokeStyle = 'red';
  24.         ctx.stroke();
  25.  
  26.        
  27.     }
  28.  
  29.  
  30.  
  31.     function bind(elem, type, handler, capture) {
  32.         type = typeof type === 'string' && type || '';
  33.         handler = handler || function () { ; };
  34.         capture = capture || false;
  35.  
  36.         if (elem.addEventListener) {
  37.             elem.addEventListener(type, handler, capture);
  38.         }
  39.         else if (elem.attachEvent) {
  40.             elem.attachEvent('on' + type, handler);
  41.         }
  42.  
  43.         return elem;
  44.     };
  45.  
  46.  
  47.     bind(window, 'load', function () {
  48.         arcTo();
  49.     });
  50.  
  51.  
  52. //]]>
  53. </script>
  54. <canvas id="canvas_test" width="200" height="200" style="border:black 1px solid"></canvas>
  55. </body>
  56. </html>




실행결과:









14. CanvasRenderingContext2D.stroke(): 경로에 지정된 외각선을 그린다.


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>Canvas</title>
  5. </head>
  6. <body>
  7. <script type="text/javascript">
  8. //<![CDATA[
  9.  
  10.  
  11.     function stroke() {
  12.  
  13.         var cvs = document.getElementById('canvas_test')
  14.           , ctx = cvs.getContext('2d');
  15.  
  16.        
  17.         // 원둘레
  18.         ctx.beginPath();
  19.         ctx.moveTo(100, 0);
  20.         ctx.arcTo(200, 0, 200, 200, 100);
  21.        
  22.         //ctx.closePath();
  23.         ctx.strokeStyle = 'red';
  24.  
  25.         // 외각선을 그린다.
  26.         ctx.stroke();
  27.  
  28.        
  29.     }
  30.  
  31.  
  32.  
  33.     function bind(elem, type, handler, capture) {
  34.         type = typeof type === 'string' && type || '';
  35.         handler = handler || function () { ; };
  36.         capture = capture || false;
  37.  
  38.         if (elem.addEventListener) {
  39.             elem.addEventListener(type, handler, capture);
  40.         }
  41.         else if (elem.attachEvent) {
  42.             elem.attachEvent('on' + type, handler);
  43.         }
  44.  
  45.         return elem;
  46.     };
  47.  
  48.  
  49.     bind(window, 'load', function () {
  50.         stroke();
  51.     });
  52.  
  53.  
  54. //]]>
  55. </script>
  56. <canvas id="canvas_test" width="200" height="200" style="border:black 1px solid"></canvas>
  57. </body>
  58. </html>




실행결과:







15. CanvasRenderingContext2D.fill(): 경로에 지정된 도형의 색을 채운다.


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>Canvas</title>
  5. </head>
  6. <body>
  7. <script type="text/javascript">
  8. //<![CDATA[
  9.  
  10.  
  11.     function fill() {
  12.  
  13.         var cvs = document.getElementById('canvas_test')
  14.           , ctx = cvs.getContext('2d');
  15.  
  16.         // rect() 메서드는 이전에 배운 fillRect() 메서드와는 달리 경로가 지정된 도형의 외각선을 그리는 stroke() 메소드를 사용해야한다.
  17.         ctx.beginPath();
  18.  
  19.         ctx.rect(10, 10, 90, 90);
  20.        
  21.         ctx.fillStyle = 'red';
  22.         ctx.fill();
  23.  
  24.         ctx.strokeStyle = 'green';
  25.         ctx.stroke();
  26.        
  27.         ctx.closePath();
  28.  
  29.        
  30.     }
  31.  
  32.  
  33.  
  34.     function bind(elem, type, handler, capture) {
  35.         type = typeof type === 'string' && type || '';
  36.         handler = handler || function () { ; };
  37.         capture = capture || false;
  38.  
  39.         if (elem.addEventListener) {
  40.             elem.addEventListener(type, handler, capture);
  41.         }
  42.         else if (elem.attachEvent) {
  43.             elem.attachEvent('on' + type, handler);
  44.         }
  45.  
  46.         return elem;
  47.     };
  48.  
  49.  
  50.     bind(window, 'load', function () {
  51.         fill();
  52.     });
  53.  
  54.  
  55. //]]>
  56. </script>
  57. <canvas id="canvas_test" width="200" height="200" style="border:black 1px solid"></canvas>
  58. </body>
  59. </html>




실행결과:












레퍼런스 참조사이트:


http://forum.falinux.com/zbxe/?_filter=search&mid=lecture_tip&category=&search_target=title&search_keyword=canvas







저작자표시
Posted by 전성균
openclose

티스토리툴바