무하프로젝트 :: HTML5 API - Canvas

HTML5 API - Canvas - 2

HTML5 2012. 5. 8. 16:27

16. CanvasRenderingContext2D.quadraticCurveTo(cpx, cpy, x, y):

한 개의 조절점(중심점)(cpx, cpy)을 마지막으로 지정된 현재 좌표와 조절점 그리고 지정된점(x, y)에 인접한 원호를 그린다.

cpx: 호를 그리는 조절점 가로 좌표

cpy: 호를 그리는 조절점 세로 좌표

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  
  <title>Canvas</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
 
 
   function quadraticCurveTo() {
 
       var cvs = 
document.getElementById('canvas_test')
         , ctx = cvs.getContext('2d');
 
       // rect() 메서드는 이전에 배운 fillRect() 메서드와는 달리 경로가 지정된 
도형의 외각선을 그리는 stroke() 메소드를 사용해야한다.
       ctx.beginPath();
 
       ctx.beginPath();
       ctx.moveTo(10, 90);
       ctx.lineTo(100, 10);
       ctx.lineTo(190, 90);
       ctx.strokeStyle = "black";
 
       ctx.closePath();
 
       ctx.stroke();
 
       ctx.beginPath();
       ctx.moveTo(10, 90);
 
       ctx.strokeStyle = 'red';
       ctx.quadraticCurveTo(100, 10, 190, 
90);
       
       ctx.stroke();
 
       
   }
 
 
 
   function bind(elem, type, handler, capture) 
{
       type = typeof type === 'string' && type || 
'';
       handler = handler || function () { ; 
};
       capture = capture || false;
 
       if (elem.addEventListener) {
           elem.addEventListener(type, handler, 
capture);
       }
       else if (elem.attachEvent) {
           elem.attachEvent('on' + type, 
handler);
       }
 
       return elem;
   };
 
 
   bind(window, 'load', function () {
       quadraticCurveTo();
   });
 
 
//]]>
</script>
<canvas id="canvas_test" 
width="200" height="200" style="border:black 1px solid"></canvas>
</body>
</html>

실행 결과:

17. CanvasRenderingContext2D.bezierCurveTo(cplx, cply, cp2x, cp2y, x, y):

한 개의 조절점(중심점)(cpx, cpy)를 마지막으로 지정된 현재 좌표와 조절점 그리고 지정된점(x, y)에 인접한 원호를 그린다.

cp1x: 베지어 첫번째 조절점 가로 좌표

cp2y: 베지어 첫번째 조절점 세로 좌표

cp1x: 베지어 두번째 조절점 가로 좌표

cp2y: 베지어 두번째 조절점 세로 좌표

x: 베지어 곡선을 그리기 위한 가상 직선 종료 점 가로 좌표

y: 베지어 곡선을 그리기 위한 가상 직선 종료 점 세로 좌표

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  
  <title>Canvas</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
 
 
   function bezierCurveTo() {
 
       var cvs = 
document.getElementById('canvas_test')
         , ctx = cvs.getContext('2d');
 
       ctx.beginPath();
       ctx.moveTo(10, 90);
       ctx.lineTo(40, 10);
       ctx.strokeStyle = "black";
       
       ctx.stroke();
 
       ctx.beginPath();
       ctx.moveTo(150, 10);
       ctx.lineTo(190, 90);
       ctx.strokeStyle = "black";
       
       ctx.stroke();
 
       ctx.beginPath();
       ctx.moveTo(10, 90);
       ctx.bezierCurveTo(40, 10, 150, 10, 190, 
90);
       ctx.strokeStyle = "red";
       
       ctx.stroke();
 
       
   }
 
 
 
   function bind(elem, type, handler, capture) 
{
       type = typeof type === 'string' && type || 
'';
       handler = handler || function () { ; 
};
       capture = capture || false;
 
       if (elem.addEventListener) {
           elem.addEventListener(type, handler, 
capture);
       }
       else if (elem.attachEvent) {
           elem.attachEvent('on' + type, 
handler);
       }
 
       return elem;
   };
 
 
   bind(window, 'load', function () {
       bezierCurveTo();
   });
 
 
//]]>
</script>
<canvas id="canvas_test" 
width="200" height="200" style="border:black 1px solid"></canvas>
</body>
</html>

실행 결과:

18. CanvasRenderingContext2D.clip(): 경로로 지정된 모든 도형을 클립 영역으로 지정한다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  
  <title>Canvas</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
 
 
   function clip() {
 
       var cvs = 
document.getElementById('canvas_test')
         , ctx = cvs.getContext('2d')
         , img = new Image();
 
       img.src = 
'http://movie.phinf.naver.net/20120314_145/1331716835803KBqTp_JPEG/movie_image.jpg?type=m210';
 
 
 
       bind(img, 'load', function(){
           ctx.drawImage(img, 0, 0, 500, 
344);
       });
 
 
       ctx.beginPath();
       
       // 경로로 지정된 모든 도형은 클립 영역 생성이 
가능하다.
 
       //ctx.rect(10, 10, 90, 90);
       ctx.arc(100, 100, 100, 0, Math.PI * 
2);
       
       //ctx.moveTo(100, 10);
       //ctx.lineTo(10, 100);
       //ctx.lineTo(190, 100);
 
       ctx.closePath();
       ctx.clip();
 
       
   }
 
 
 
   function bind(elem, type, handler, capture) 
{
       type = typeof type === 'string' && type || 
'';
       handler = handler || function () { ; 
};
       capture = capture || false;
 
       if (elem.addEventListener) {
           elem.addEventListener(type, handler, 
capture);
       }
       else if (elem.attachEvent) {
           elem.attachEvent('on' + type, 
handler);
       }
 
       return elem;
   };
 
 
   bind(window, 'load', function () {
       clip();
   });
 
 
//]]>
</script>
<canvas id="canvas_test" 
width="200" height="200" style="border:black 1px solid"></canvas>
</body>
</html>

실행 결과:

19.

CancasRenderingContext2D.drawImage(in HTMLImageElement image, in float dx, in float dy):

CancasRenderingContext2D.drawImage(in HTMLImageElement image, in float dx, in float dy, optional in float dw, in float dh):

CancasRenderingContext2D.drawImage(in HTMLImageElement image, in float dx, in float dy, optional in float dw, in float dh, in float sx, in float sy, in float sw, in float sh):

경로로 지정된 이미지 영역을 지정한다.

dx: 이미지가 그려질 위치 가로 좌표

dy: 이미지가 그려질 위치 세로 좌표

dw: 그려질 이미지의 가로 폭

dh: 그려질 이미지의 세로 폭

sx: 원 이미지에서 그려질 부분의 가로 시작 좌표

sy: 원 이미지에서 그려질 부분의 세로 시작 좌표

sw: 원 이미지에서 그려질 부분의 가로 폭

sh: 원 이미지에서 그려질 부분의 세로 폭

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  
  <title>Canvas</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
 
 
   function drawImage() {
 
       var cvs = 
document.getElementById('canvas_test')
         , ctx = cvs.getContext('2d')
         , img = new Image();
 
       img.src = 
'http://movie.phinf.naver.net/20120314_145/1331716835803KBqTp_JPEG/movie_image.jpg?type=m210';
 
 
 
       bind(img, 'load', function(){
           ctx.drawImage(img, 0, 0);
           ctx.drawImage(img, 0, 0, img.width / 2, 
img.height / 2);
           ctx.drawImage(img, 0, 0, 100, 100, 100, 0, 40, 
40);
       });
   }
 
 
 
   function bind(elem, type, handler, capture) 
{
       type = typeof type === 'string' && type || 
'';
       handler = handler || function () { ; 
};
       capture = capture || false;
 
       if (elem.addEventListener) {
           elem.addEventListener(type, handler, 
capture);
       }
       else if (elem.attachEvent) {
           elem.attachEvent('on' + type, 
handler);
       }
 
       return elem;
   };
 
 
   bind(window, 'load', function () {
       drawImage();
   });
 
 
//]]>
</script>
<canvas id="canvas_test" 
width="200" height="200" style="border:black 1px solid"></canvas>
</body>
</html>

실행결과:

20. CancasRenderingContext2D.getImageData(x, y, w, h): context에 생성된 이미지의 픽셀 데이타를 가져온다.

21. CancasRenderingContext2D.putImageData(data, x, y): 픽셀 데이타로 이미지를 생성한다.

x: 이미지가 그려질 위치 가로 좌표

y: 이미지가 그려질 위치 세로 좌표

w: 그려질 이미지의 가로 폭

h: 그려질 이미지의 세로 폭

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  
  <title>Canvas</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
 
 
   function bezierCurveTo() {
 
       var cvs = 
document.getElementById('canvas_test')
         , ctx = cvs.getContext('2d')
         , img = new Image();
 
       img.src = 
'http://movie.phinf.naver.net/20120314_145/1331716835803KBqTp_JPEG/movie_image.jpg?type=m210';
 
 
 
       bind(img, 'load', function () {
           ctx.drawImage(img, 0, 0, img.width, 
img.height);
       });
 
       // 이미지 pixel data로 가져온다.
       var pxs = ctx.getImageData(0, 0, img.width, 
img.height);
       //pixel 배열 정보에 대한 길이
       alert(pxs.data.length); // [255, 0, 0, 
255,....]
 
       // 이미지 pixel data로 컨텍스트에 이미지를 
생성한다.
       ctx.putImageData(pxs, 0, 0);
 
   }
 
 
 
   function bind(elem, type, handler, capture) 
{
       type = typeof type === 'string' && type || 
'';
       handler = handler || function () { ; 
};
       capture = capture || false;
 
       if (elem.addEventListener) {
           elem.addEventListener(type, handler, 
capture);
       }
       else if (elem.attachEvent) {
           elem.attachEvent('on' + type, 
handler);
       }
 
       return elem;
   };
 
 
   bind(window, 'load', function () {
       bezierCurveTo();
   });
 
 
//]]>
</script>
<canvas id="canvas_test" 
width="200" height="200" style="border:black 1px solid"></canvas>
</body>
</html>

22. CanvasRenderingContext2D.translate(in float x, in float y): context의 이동좌표를 지정한다.

x: 이동할 context의 가로 좌표

y: 이동할 context의 세로 좌표

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  
  <title>Canvas</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
 
 
   function translate() {
 
       var cvs = 
document.getElementById('canvas_test')
         , ctx = cvs.getContext('2d')
         , img = new Image();
 
       //img.src = 
'http://movie.phinf.naver.net/20120314_145/1331716835803KBqTp_JPEG/movie_image.jpg?type=m210';
 
 
 
       ctx.save();
       ctx.translate(0, 0);
       ctx.fillStyle = "black";
       ctx.fillRect(0, 0, 50, 50);
       ctx.restore();
 
       ctx.save();
       ctx.translate(50, 0);
       ctx.fillStyle = "red";
       ctx.fillRect(0, 0, 50, 50);
       ctx.restore();
 
       ctx.save();
       ctx.translate(100, 0);
       ctx.fillStyle = "green";
       ctx.fillRect(0, 0, 50, 50);
       ctx.restore();
 
       ctx.save();
       ctx.translate(150, 0);
       ctx.fillStyle = "yellow";
       ctx.fillRect(0, 0, 50, 50);
       ctx.restore();
   }
 
 
 
   function bind(elem, type, handler, capture) 
{
       type = typeof type === 'string' && type || 
'';
       handler = handler || function () { ; 
};
       capture = capture || false;
 
       if (elem.addEventListener) {
           elem.addEventListener(type, handler, 
capture);
       }
       else if (elem.attachEvent) {
           elem.attachEvent('on' + type, 
handler);
       }
 
       return elem;
   };
 
 
   bind(window, 'load', function () {
       translate();
   });
 
 
//]]>
</script>
<canvas id="canvas_test" 
width="200" height="200" style="border:black 1px solid"></canvas>
</body>
</html>

실행 결과:

23. CanvasRenderingContext2D.save(): context의 현재 상태를 스택에 저장합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  
  <title>Canvas</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
 
 
   function save() {
 
       var cvs = 
document.getElementById('canvas_test')
         , ctx = cvs.getContext('2d')
         , img = new Image();
 
       //img.src = 
'http://movie.phinf.naver.net/20120314_145/1331716835803KBqTp_JPEG/movie_image.jpg?type=m210';
 
 
       ctx.fillStyle = "black";
       ctx.fillRect(20, 20, 50, 50);
 
       // 현재 context 상태를 스택에 저장합니다.
       ctx.save();
 
       ctx.fillStyle = "red";
 
       ctx.fillRect(100, 0, 50, 50);
 
       // 현재 context 상태를 복원합니다.
       // 이와 같은 경우 초기 context의 fillStyle에 정의된 컬러(black)가 
새롭게 생성된 사각영역에 적용됩니다.
       // 이유는 초기 저장된 context의 상태가 ctx.restore() 메소드로 복원됐기 
때문입니다.
       ctx.restore();
       //ctx.fillStyle = "white";
       ctx.fillRect(0, 0, 20, 20);
   }
 
 
 
   function bind(elem, type, handler, capture) 
{
       type = typeof type === 'string' && type || 
'';
       handler = handler || function () { ; 
};
       capture = capture || false;
 
       if (elem.addEventListener) {
           elem.addEventListener(type, handler, 
capture);
       }
       else if (elem.attachEvent) {
           elem.attachEvent('on' + type, 
handler);
       }
 
       return elem;
   };
 
 
   bind(window, 'load', function () {
       save();
   });
 
 
//]]>
</script>
<canvas id="canvas_test" 
width="200" height="200" style="border:black 1px solid"></canvas>
</body>
</html>

실행결과:

24. CanvasRenderingContext2D.restore(): 스택에 마지막으로 저장된 context의 상태를 복원합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  
  <title>Canvas</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
 
 
   function save() {
 
       var cvs = 
document.getElementById('canvas_test')
         , ctx = cvs.getContext('2d')
         , img = new Image();
 
       //img.src = 
'http://movie.phinf.naver.net/20120314_145/1331716835803KBqTp_JPEG/movie_image.jpg?type=m210';
 
 
       ctx.fillStyle = "black";
       ctx.fillRect(20, 20, 50, 50);
 
       // 현재 context 상태를 스택에 저장합니다.
       ctx.save();
 
       ctx.fillStyle = "red";
 
       ctx.fillRect(100, 0, 50, 50);
 
       // 현재 context 상태를 복원합니다.
       // 이와 같은 경우 초기 context의 fillStyle에 정의된 컬러(black)가 
새롭게 생성된 사각영역에 적용됩니다.
       // 이유는 초기 저장된 context의 상태가 ctx.restore() 메소드로 복원됐기 
때문입니다.
       ctx.restore();
       //ctx.fillStyle = "white";
       ctx.fillRect(0, 0, 20, 20);
   }
 
 
 
   function bind(elem, type, handler, capture) 
{
       type = typeof type === 'string' && type || 
'';
       handler = handler || function () { ; 
};
       capture = capture || false;
 
       if (elem.addEventListener) {
           elem.addEventListener(type, handler, 
capture);
       }
       else if (elem.attachEvent) {
           elem.attachEvent('on' + type, 
handler);
       }
 
       return elem;
   };
 
 
   bind(window, 'load', function () {
       save();
   });
 
 
//]]>
</script>
<canvas id="canvas_test" 
width="200" height="200" style="border:black 1px solid"></canvas>
</body>
</html>

실행결과:

25. CanvasRenderingContext2D.rotate(): 원점을 기준으로 캔퍼스를 회전 시킵니다. 이때 사각영역의 좌표 x, y는 지정하지 않습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  
  <title>Canvas</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
 
 
   function rotate() {
 
       var cvs = 
document.getElementById('canvas_test')
         , ctx = cvs.getContext('2d')
         , img = new Image();
 
       //img.src = 
'http://movie.phinf.naver.net/20120314_145/1331716835803KBqTp_JPEG/movie_image.jpg?type=m210';
 
       ctx.fillStyle = "red";
 
       ctx.translate(100, 100);
       
       ctx.fillRect(0, 0, 10, 50);
       ctx.rotate(Math.PI * 2 / 10);
 
       ctx.fillRect(0, 0, 10, 50);
       ctx.rotate(Math.PI * 2 / 10);
 
       ctx.fillRect(0, 0, 10, 50);
       ctx.rotate(Math.PI * 2 / 10);
 
       ctx.fillRect(0, 0, 10, 50);
       ctx.rotate(Math.PI * 2 / 10);
   }
 
 
 
   function bind(elem, type, handler, capture) 
{
       type = typeof type === 'string' && type || 
'';
       handler = handler || function () { ; 
};
       capture = capture || false;
 
       if (elem.addEventListener) {
           elem.addEventListener(type, handler, 
capture);
       }
       else if (elem.attachEvent) {
           elem.attachEvent('on' + type, 
handler);
       }
 
       return elem;
   };
 
 
   bind(window, 'load', function () {
       rotate();
   });
 
 
//]]>
</script>
<canvas id="canvas_test" 
width="200" height="200" style="border:black 1px solid"></canvas>
</body>
</html>

실행결과:

26. CanvasRenderingContext2D.transform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy):

캔퍼스에 이전에 적용된 변환 행렬 적용 값을 기준으로 새로운 변형 행렬 값을 설정합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  
  <title>Canvas</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
 
 
   function transform() {
 
       var cvs = 
document.getElementById('canvas_test')
         , ctx = cvs.getContext('2d')
         , img = new Image();
 
       //img.src = 
'http://movie.phinf.naver.net/20120314_145/1331716835803KBqTp_JPEG/movie_image.jpg?type=m210';
 
       var sin = Math.sin(Math.PI / 6);
       var cos = Math.cos(Math.PI / 6);
 
       ctx.translate(100, 100);
       ctx.fillStyle = "rgb( 200,0,0 
)";
       ctx.strokeStyle = "rgb(0,0,0)";
 
       for (var i = 0; i <= 12; i++) 
{
           ctx.fillRect(0, 0, 30, 30);
           ctx.strokeRect(0, 0, 30, 
30);
           ctx.transform(cos, sin, -sin, cos, 0, 
0);
       }
   }
 
 
 
   function bind(elem, type, handler, capture) 
{
       type = typeof type === 'string' && type || 
'';
       handler = handler || function () { ; 
};
       capture = capture || false;
 
       if (elem.addEventListener) {
           elem.addEventListener(type, handler, 
capture);
       }
       else if (elem.attachEvent) {
           elem.attachEvent('on' + type, 
handler);
       }
 
       return elem;
   };
 
 
   bind(window, 'load', function () {
       transform();
   });
 
 
//]]>
</script>
<canvas id="canvas_test" 
width="200" height="200" style="border:black 1px solid"></canvas>
</body>
</html>

실행결과:

27. CanvasRenderingContext2D.setTransform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy):

캔퍼스에 변환 행렬 적용 값을 새로 초기화 하여 설정합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  
  <title>Canvas</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
 
 
   function setTransform() {
 
       var cvs = 
document.getElementById('canvas_test')
         , ctx = cvs.getContext('2d')
         , img = new Image();
 
       //img.src = 
'http://movie.phinf.naver.net/20120314_145/1331716835803KBqTp_JPEG/movie_image.jpg?type=m210';
 
       var sin = Math.sin(Math.PI / 6);
       var cos = Math.cos(Math.PI / 6);
 
       ctx.translate(50, 50);
       ctx.fillStyle = "rgb( 200,0,0 
)";
       ctx.strokeStyle = "rgb(0,0,0)";
 
       ctx.fillRect(0, 0, 50, 50);
       ctx.strokeRect(0, 0, 50, 50);
 
       ctx.setTransform(cos, sin, -sin, cos, 0, 
0);
 
       ctx.translate(100, 100);
       ctx.fillRect(0, 0, 50, 50);
       ctx.strokeRect(0, 0, 50, 50);
   }
 
 
 
   function bind(elem, type, handler, capture) 
{
       type = typeof type === 'string' && type || 
'';
       handler = handler || function () { ; 
};
       capture = capture || false;
 
       if (elem.addEventListener) {
           elem.addEventListener(type, handler, 
capture);
       }
       else if (elem.attachEvent) {
           elem.attachEvent('on' + type, 
handler);
       }
 
       return elem;
   };
 
 
   bind(window, 'load', function () {
       setTransform();
   });
 
 
//]]>
</script>
<canvas id="canvas_test" 
width="200" height="200" style="border:black 1px solid"></canvas>
</body>
</html>

실행결과:

28. CanvasRenderingContext2D.lineWidth: canvas 선의 두께를 지정한다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  
  <title>Canvas</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
 
 
   function lineWidth() {
 
       var cvs = 
document.getElementById('canvas_test')
         , ctx = cvs.getContext('2d')
         , img = new Image();
 
       //img.src = 
'http://movie.phinf.naver.net/20120314_145/1331716835803KBqTp_JPEG/movie_image.jpg?type=m210';
 
       // 선의 두께를 정의한다.
       ctx.lineWidth = 12;
       ctx.beginPath();
       ctx.moveTo(100, 100);
       ctx.lineTo(50, 50);
 
       ctx.stroke();
   }
 
 
 
   function bind(elem, type, handler, capture) 
{
       type = typeof type === 'string' && type || 
'';
       handler = handler || function () { ; 
};
       capture = capture || false;
 
       if (elem.addEventListener) {
           elem.addEventListener(type, handler, 
capture);
       }
       else if (elem.attachEvent) {
           elem.attachEvent('on' + type, 
handler);
       }
 
       return elem;
   };
 
 
   bind(window, 'load', function () {
       lineWidth();
   });
 
 
//]]>
</script>
<canvas id="canvas_test" 
width="200" height="200" style="border:black 1px solid"></canvas>
</body>
</html>

실행결과:

29. CanvasRenderingContext2D.lineCap: canvas 선의 끝 모양을 지정한다.

butt: 아무런 효과가 없다

round: 선 폭의 1/2을 반지름으로 하는 반원이 선 양쪽 끝에 그려진다.

square: 선 폭의 1/2 높이로 하는 사각형이 손 양쪽 끝에 그려진다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  
  <title>Canvas</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
 
 
   function lineCap() {
 
       var cvs = 
document.getElementById('canvas_test')
         , ctx = cvs.getContext('2d')
         , img = new Image();
 
       //img.src = 
'http://movie.phinf.naver.net/20120314_145/1331716835803KBqTp_JPEG/movie_image.jpg?type=m210';
 
       // 선의 두께를 정의한다.
       ctx.lineWidth = 12;
       ctx.lineCap = 'round';
       ctx.beginPath();
       ctx.moveTo(100, 100);
       ctx.lineTo(50, 50);
 
       ctx.stroke();
   }
 
 
 
   function bind(elem, type, handler, capture) 
{
       type = typeof type === 'string' && type || 
'';
       handler = handler || function () { ; 
};
       capture = capture || false;
 
       if (elem.addEventListener) {
           elem.addEventListener(type, handler, 
capture);
       }
       else if (elem.attachEvent) {
           elem.attachEvent('on' + type, 
handler);
       }
 
       return elem;
   };
 
 
   bind(window, 'load', function () {
       lineCap();
   });
 
 
//]]>
</script>
<canvas id="canvas_test" 
width="200" height="200" style="border:black 1px solid"></canvas>
</body>
</html>

실행결과:

30. CanvasRenderingContext2D.lineJoin: canvas 선과 선의 연결 부분의 모양을 지정한다.

round: 둥근 모양으로 연결된다.

bavel: 연결된 부분이 단면으로 남는다.

miter: 연결한 흔적이 남지 않는다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  
  <title>Canvas</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
 
 
   function lineJoin() {
 
       var cvs = 
document.getElementById('canvas_test')
         , ctx = cvs.getContext('2d')
         , img = new Image();
 
       //img.src = 
'http://movie.phinf.naver.net/20120314_145/1331716835803KBqTp_JPEG/movie_image.jpg?type=m210';
 
       // 선의 두께를 정의한다.
       ctx.lineWidth = 12;
       ctx.lineJoin = 'round';
       ctx.beginPath();
       ctx.moveTo(100, 100);
       ctx.lineTo(100, 50);
       ctx.lineTo(150, 100);
 
       ctx.stroke();
   }
 
 
 
   function bind(elem, type, handler, capture) 
{
       type = typeof type === 'string' && type || 
'';
       handler = handler || function () { ; 
};
       capture = capture || false;
 
       if (elem.addEventListener) {
           elem.addEventListener(type, handler, 
capture);
       }
       else if (elem.attachEvent) {
           elem.attachEvent('on' + type, 
handler);
       }
 
       return elem;
   };
 
 
   bind(window, 'load', function () {
       lineJoin();
   });
 
 
//]]>
</script>
<canvas id="canvas_test" 
width="200" height="200" style="border:black 1px solid"></canvas>
</body>
</html>

실행결과:

31. CanvasRenderingContext2D.miterLimit: canvas lineJoin 속성이 'miter' 지정되었을 경우 연결선 돌출 부위의 절단 범위를 지정한다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  
  <title>Canvas</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
 
 
   function miterLimit() {
 
       var cvs = 
document.getElementById('canvas_test')
         , ctx = cvs.getContext('2d')
         , img = new Image();
 
       //img.src = 
'http://movie.phinf.naver.net/20120314_145/1331716835803KBqTp_JPEG/movie_image.jpg?type=m210';
 
       // 선의 두께를 정의한다.
       ctx.lineWidth = 10;
       ctx.lineJoin = 'miter';
       ctx.miterLimit = 1;
 
       ctx.beginPath();
       ctx.moveTo(100, 100);
       ctx.lineTo(100, 50);
       ctx.lineTo(150, 100);
       ctx.stroke();
   }
 
 
 
   function bind(elem, type, handler, capture) 
{
       type = typeof type === 'string' && type || 
'';
       handler = handler || function () { ; 
};
       capture = capture || false;
 
       if (elem.addEventListener) {
           elem.addEventListener(type, handler, 
capture);
       }
       else if (elem.attachEvent) {
           elem.attachEvent('on' + type, 
handler);
       }
 
       return elem;
   };
 
 
   bind(window, 'load', function () {
       miterLimit();
   });
 
 
//]]>
</script>
<canvas id="canvas_test" 
width="200" height="200" style="border:black 1px solid"></canvas>
</body>
</html>

실행결과:

32. CanvasRenderingContext2D.createPattern: canvas 경로에 선을 그리거나 색을 채울 때 이미지의 반복 패턴을 정의한다.

반복패턴:

repeat: 양방향으로 이미지가 반복된다.

repeat-x: 가로 방향으로 이미지가 반복된다.

repeat-y: 세로 방향으로 이미지가 반복된다.

no-repeat: 이미지가 반복시키지 않는다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  
  <title>Canvas</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
 
   function createPattern() {
 
       var cvs = 
document.getElementById('canvas_test')
         , ctx = cvs.getContext('2d')
         , img = new Image();
 
       img.src = 
'http://go.microsoft.com/fwlink/?LinkID=199028';
 
       bind(img, 'load', function () {
       });
 
       var ptn = ctx.createPattern(img, 
'repeat');
       ctx.fillStyle = ptn;
       ctx.fillRect(0, 0, 200, 200);
   }
 
   function bind(elem, type, handler, capture) 
{
 
       type = typeof type === 'string' && type || 
'';
       handler = handler || function () { ; 
};
       capture = capture || false;
 
       if (elem.addEventListener) {
           elem.addEventListener(type, handler, 
capture);
       }
       else if (elem.attachEvent) {
           elem.attachEvent('on' + type, 
handler);
       }
 
       return elem;
   };
 
 
   bind(window, 'load', function () {
       createPattern();
   });
 
 
//]]>
</script>
<canvas id="canvas_test" 
width="200" height="200" style="border:black 1px solid"></canvas>
</body>
</html>

실행결과:

33. CanvasRenderingContext2D.font:

34. CanvasRenderingContext2D.textAlign:

35. CanvasRenderingContext2D.textBaseLine:

36. CanvasRenderingContext2D.fillText: canvas context에 text를 사용한다.

text: 양방향으로 이미지가 반복된다.

width: 가로 방향으로 이미지가 반복된다.

height: 세로 방향으로 이미지가 반복된다.

max-width: 가로 최대 폭

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  
  <title>Canvas</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
 
   function fillText() {
 
       var cvs = 
document.getElementById('canvas_test')
         , ctx = cvs.getContext('2d')
         , img = new Image();
 
       img.src = 
'http://go.microsoft.com/fwlink/?LinkID=199028';
 
       // 폰트, 사이즈 지정
       ctx.font = '30px impact';
       // 정렬 지정
       ctx.textAlign = 'center';
       // 포지션 지정
       ctx.textBaseLine = 'top';
 
       ctx.fillText('hello world', 100, 100, 
200);
   }
 
   function bind(elem, type, handler, capture) 
{
 
       type = typeof type === 'string' && type || 
'';
       handler = handler || function () { ; 
};
       capture = capture || false;
 
       if (elem.addEventListener) {
           elem.addEventListener(type, handler, 
capture);
       }
       else if (elem.attachEvent) {
           elem.attachEvent('on' + type, 
handler);
       }
 
       return elem;
   };
 
 
   bind(window, 'load', function () {
       fillText();
   });
 
 
//]]>
</script>
<canvas id="canvas_test" 
width="200" height="200" style="border:black 1px solid"></canvas>
</body>
</html>

실행결과:

37. CanvasRenderingContext2D.shadowColor:

38. CanvasRenderingContext2D.shadowOffsetX:

49. CanvasRenderingContext2D.shadowOffsetY:

40. CanvasRenderingContext2D.shadowBlur:

canvas context에 그림자 효과를 사용한다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  
  <title>Canvas</title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
 
   function shadow() {
 
       var cvs = 
document.getElementById('canvas_test')
         , ctx = cvs.getContext('2d')
         , img = new Image();
 
       img.src = 
'http://go.microsoft.com/fwlink/?LinkID=199028';
 
       ctx.font = '30px impact';
       ctx.textAlign = 'center';
       ctx.textBaseLine = 'top';
 
       //그림자 적용
       ctx.shadowColor = 'black';
       ctx.shadowOffsetX = 8;
       ctx.shadowOffsetY = 8;
 
       ctx.shadowBlur = 2;
 
       ctx.fillText('hello world', 100, 100, 
200);
   }
 
   function bind(elem, type, handler, capture) 
{
 
       type = typeof type === 'string' && type || 
'';
       handler = handler || function () { ; 
};
       capture = capture || false;
 
       if (elem.addEventListener) {
           elem.addEventListener(type, handler, 
capture);
       }
       else if (elem.attachEvent) {
           elem.attachEvent('on' + type, 
handler);
       }
 
       return elem;
   };
 
 
   bind(window, 'load', function () { shadow(); 
});
 
//]]>
</script>
<canvas id="canvas_test" 
width="200" height="200" style="border:black 1px solid"></canvas>
</body>
</html>