5-1-3.Á÷¼± ±×¸®±â

À̹ø¿¡´Â ÇÑ´Ü°è ´õ º¹ÀâÇÑ µµÇüÀ» ±×·Á º¸ÀÚ. ÀÚÀ¯ °î¼±Àº ¸¶¿ì½º°¡ À̵¿ÇÏ´Â Áï½Ã ¹Ù·Î ±×¸®¸é µÈ´Ù. ¾Æ·¡ÂÊ¿¡ ¾î¶² ±×¸²ÀÌ ÀÖ´ø »ó°üÇÒ ÇÊ¿ä¾øÀÌ ¹«Á¶°Ç µ¤¾î¼­ ±×¸®¸é ±×¸¸ÀÌ´Ù. ±×·¯³ª Á÷¼±À̳ª »ç°¢Çü °°Àº µµÇüÀÇ °æ¿ì´Â Å©±â¸¦ ÁöÁ¤ÇØ¾ß ÇϹǷΠÁï½Ã ±×¸®Áö ¾Ê´Â´Ù. ¸¶¿ì½º¸¦ ´©¸¦ ¶§ µå·¡±×¸¦ ½ÃÀÛÇÏ°í À̵¿ÇÏ´Â Á·Á· Å©±â¸¦ Á¶Á¤ÇÑ ÈÄ ÃÖÁ¾ÀûÀ¸·Î ¸¶¿ì½º ¹öÆ°À» ³õÀ» ¶§ È®Á¤µÈ Å©±â´ë·Î µµÇüÀ» ±×·Á¾ß ÇÑ´Ù.

¸¶¿ì½º°¡ À̵¿ÁßÀÏ ¶§´Â ¾ÆÁ÷ µµÇüÀÌ È®Á¤µÈ °ÍÀÌ ¾Æ´Ï¹Ç·Î Áß°£ °úÁ¤À» º¸¿© ÁÖ¾î¾ß ÇÏ¸ç ¸¶¿ì½º°¡ À̵¿ÇÒ ¶§¸¶´Ù ÀÌÀü À̺¥Æ®¿¡¼­ ±×·È´ø Á÷¼±À» Áö¿ö¾ß ÇÑ´Ù. Á÷¼± Çϳª¸¸ ±×¸°´Ù¸é ´Ù Áö¿ì°í »õ·Î ±×¸®¸é µÇ°ÚÁö¸¸ ¾Æ·¡ÂÊ¿¡ ÀÌ¹Ì ±×·ÁÁø Á÷¼±ÀÌ ÀÖÀ» ¶§´Â ĵ¹ö½ºÀÇ Ç¥¸éÀ» º¸È£ÇØ¾ß ÇÒ Àǹ«°¡ ÀÖ´Ù. ±×·¡¼­ ĵ¹ö½º¸¦ ºñÆ®¸ÊÀ¸·Î ¶°¼­ ¹é¾÷À» ÀúÀåÇÏ°í ¸Å¹ø ±×¸± ¶§¸¶´Ù ¹é¾÷À¸·Î º¹±¸ÇÑ ÈÄ »õ Á÷¼±À» ±×¾î¾ß ÇÑ´Ù.

 

drawlines.html

<!DOCTYPE html>

<head>

     <meta charset="utf-8">

     <title>drawlines</title>

     <style>

         canvas {border:5px solid magenta;}

     </style>

</head>

<body>

     <div>

         »ö»ó : <select id="selcolor">

              <option value="black">°ËÁ¤</option>

              <option value="red">»¡°­</option>

              <option value="green">ÃÊ·Ï</option>

              <option value="blue">ÆĶû</option>

              <option value="magenta">ºÐÈ«</option>

         </select>

         ±½±â : <select id="selwidth">

              <option value="1">¾ã°Ô</option>

              <option value="3">Áß°£</option>

              <option value="5">±½°Ô</option>

         </select>

         <input type="button" id="clear" value="¸ðµÎ Áö¿ò"/>

     </div>

    

     <canvas id="canvas" width="600" height="400">

         ÀÌ ºê¶ó¿ìÀú´Â ĵ¹ö½º¸¦ Áö¿øÇÏÁö ¾Ê½À´Ï´Ù.

     </canvas>

     <script>

         var canvas;

         var ctx;

         var sx, sy;                  // µå·¡±× ½ÃÀÛÁ¡

         var ex, ey;                  // µå·¡±× ³¡Á¡

         var drawing;                // ±×¸®°í ÀÖ´Â ÁßÀΰ¡

         var backup;

        

         window.onload = function() {

              canvas = document.getElementById("canvas");

              if (canvas == null || canvas.getContext == null) return;

              ctx = canvas.getContext("2d");

             

              canvas.onmousedown = function(e) {

                   e.preventDefault();

                  

                   // ½ÃÀÛ ÁÂÇ¥ ±¸ÇÔ

                   sx = canvasX(e.clientX);

                   sy = canvasY(e.clientY);

 

                   // ¹é¾÷ ¶ß°í ±×¸®±â ½ÃÀÛ

                   backup = ctx.getImageData(0, 0, canvas.width, canvas.height);

                   drawing = true;

              }

             

              canvas.onmousemove = function(e) {

                   e.preventDefault();

                   ex = canvasX(e.clientX);

                   ey = canvasY(e.clientY);

                  

                   // ¹é¾÷ º¹±¸ÇÏ°í ÇöÀç ¼± ±×¸²

                   if (drawing) {

                        ctx.putImageData(backup, 0, 0);

                        ctx.beginPath();

                        ctx.moveTo(sx, sy);

                        ctx.lineTo(ex, ey);

                        ctx.stroke();

                   }

              }

             

              canvas.onmouseup = function(e) {

                   drawing = false;

              }            

         }

        

         var selcolor = document.getElementById("selcolor");

         selcolor.onchange = function(e) {

              ctx.strokeStyle = selcolor.value;

         }

        

         var selwidth = document.getElementById("selwidth");

         selwidth.onchange = function(e) {

              ctx.lineWidth = selwidth.value;

         }

        

         var btnclear = document.getElementById("clear");

         btnclear.onclick = function(e) {

              ctx.clearRect(0, 0, canvas.width, canvas.height);

         }

        

         function canvasX(clientX) {

              var bound = canvas.getBoundingClientRect();

              var bw = 5;

              return (clientX - bound.left - bw) * (canvas.width / (bound.width - bw * 2));

         }

        

         function canvasY(clientY) {

              var bound = canvas.getBoundingClientRect();

              var bw = 5;

              return (clientY - bound.top - bw) * (canvas.height / (bound.height - bw * 2));

         }

     </script>

</body>

</html>

 

»ö»ó, ±½±â, ¸ðµÎ Áö¿ò ¹öÆ°ÀÇ À̺¥Æ® Çڵ鷯´Â ¾Õ ¿¹Á¦¿Í °°´Ù. ¸¶¿ì½º À̺¥Æ® Çڵ鷯ÀÇ Äڵ常 ¾à°£ ´Ù¸£´Ù. ¸¶¿ì½º ¹öÆ°À» ´©¸¥ ä·Î À̵¿ÇÏ¸é ¼±ÀÌ °°ÀÌ ´Ã¾î³ª¸ç ¹öÆ°À» ³õÀ» ¶§ ¼±ÀÌ È®Á¤µÈ´Ù.

¸¶¿ì½º ¹öÆ°À» ´©¸¦ ¶§ ½ÃÀÛ ÁÂÇ¥¸¦ sx, sy º¯¼ö¿¡ ±¸ÇØ ³õ´Â´Ù. ±×¸®°í °»½ÅÀ» À§ÇØ ÇöÀç ĵ¹ö½º »óŸ¦ backup º¯¼ö¿¡ ÀúÀåÇÑ´Ù. getImageData ¸Þ¼­µå·Î ĵ¹ö½ºÀÇ Àüü ºñÆ®¸Ê Á¤º¸¸¦ ¶° ³õ´Â °ÍÀÌ´Ù. ¾Æ·¡ÂÊ¿¡ ±×·ÁÁø Á÷¼±ÀÌ ¸î °³Àΰ¡¿¡ »ó°ü¾øÀÌ Àüü ÇüŸ¦ ¹é¾÷ÇØ µÐ´Ù. Áï½Ã ¸ðµå´Â µµÇü¿¡ ´ëÇÑ Á¤º¸°¡ ¾øÀ¸¹Ç·Î ºñÆ®¸ÊÀ» ¶° µÎÁö ¾ÊÀ¸¸é ±× Àü¿¡ ¹«¾ùÀÌ ±×·ÁÁ® ÀÖ¾ú´ÂÁö ¾Ë ¹æ¹ýÀÌ ¾ø´Ù.

¸¶¿ì½º ¹öÆ°ÀÌ ¿òÁ÷À̸é ÃÖÃÊ ´©¸¥ sx, sy ÁÂÇ¥¿¡¼­ À̵¿ÇÑ »õ ÁÂÇ¥ ex, ey·Î ¼±À» ±×¾î Áß°£ °úÁ¤À» º¸¿©ÁØ´Ù. À̶§ ±×¸®´Â ¼±Àº ¾îµð±îÁö³ª ÀÓ½ÃÀûÀÎ ¼±ÀÏ »ÓÀÌ¸ç ¾ÆÁ÷ È®Á¤µÈ ¼±Àº ¾Æ´Ï´Ù. ¸Å ¸¶¿ì½º À̵¿¸¶´Ù ¹Ù²î¹Ç·Î ¿ø·¡ ±×¸²À» º¹±¸ÇÏ°í ÀÌ À§¿¡ Á÷¼±À» ±×·Á¾ß ÇÑ´Ù. backup¿¡´Â È®Á¤µÈ ¼±ÀÌ ±×·ÁÁ® ÀÖ°í ÀÓ½ÃÀûÀÎ ¼±Àº ÁÂÇ¥¸¦ ¹Ù²ã °¡¸ç °è¼Ó ´Ù½Ã ±×·ÁÁö´Â °ÍÀÌ´Ù.

¸¶¿ì½º ¹öÆ°À» ³õÀ» ¶§´Â ±×¸®±â¸¦ ÁßÁöÇϱ⸸ ÇÏ¸é µÈ´Ù. ¸¶¿ì½º À̵¿½Ã¿¡ ±×·Á ³õÀº Àӽà Á÷¼±ÀÌ Äµ¹ö½º¿¡ »õ°ÜÁø ä·Î ³²¾Æ ÀÖÀ¸¹Ç·Î ¼±ÀÌ È®Á¤µÈ´Ù. ´ÙÀ½ ¸¶¿ì½º ¹öÆ°À» ´©¸£¸é ¶È°°Àº °úÁ¤ÀÌ °è¼Ó ¹Ýº¹µÈ´Ù. ÀÌ ¿¹Á¦¿¡¼­ ¹é¾÷ÀÌ ¿Ö ÇÊ¿äÇÑÁö Àß ÀÌÇØ°¡ µÇÁö ¾Ê´Â´Ù¸é backup¿¡ ÀúÀå ¹× º¹±¸ÇÏ´Â Äڵ带 ÁÖ¼® ó¸®ÇÑ ÈÄ ½ÇÇàÇØ º¸¸é µÈ´Ù.

 

drawlines2.html

<!DOCTYPE html>

....

                   // ¹é¾÷ ¶ß°í ±×¸®±â ½ÃÀÛ

                   // backup = ctx.getImageData(0, 0, canvas.width, canvas.height);

                   drawing = true;

              }

             

              canvas.onmousemove = function(e) {

                   e.preventDefault();

                   ex = canvasX(e.clientX);

                   ey = canvasY(e.clientY);

                  

                   // ¹é¾÷ º¹±¸ÇÏ°í ÇöÀç ¼± ±×¸²

                   if (drawing) {

                        // ctx.putImageData(backup, 0, 0);

                        ctx.beginPath();

                        ctx.moveTo(sx, sy);

                        ctx.lineTo(ex, ey);

                        ctx.stroke();

                   }

              }

 

backup º¯¼ö°¡ µé¾î°£ ¹®Àå µÎ ÁÙ¸¸ ÁÖ¼®Ã³¸®ÇÏ¸é µÈ´Ù. ÀÌ »óÅ¿¡¼­ ½ÇÇàÇØ º¸ÀÚ.

¹é¾÷°ú º¹±¸¸¦ ÇÏÁö ¾ÊÀ¸¸é ±æÀÌ°¡ È®Á¤µÇÁöµµ ¾ÊÀº ¼±ÀÌ °è¼Ó ±×·ÁÁö¸ç ĵ¹ö½º Ç¥¸é¿¡ ÀÌ¹Ì ±×·Á ³õÀº Á÷¼±µµ Æı«µÈ´Ù. ¹é¾÷Àº ÀÌÀü »óŸ¦ ±×´ë·Î À¯ÁöÇϸ鼭 Àӽà Á÷¼±À» ÀÚÀ¯·Ó°Ô ÆíÁýÇϱâ À§ÇØ ÇÊ¿äÇÏ´Ù.