5-1-2.ÀÚÀ¯ °î¼±

ĵ¹ö½º¸¦ »ç¿ëÇÏ¿© ¸¶¿ì½º°¡ ¿òÁ÷À̴´ë·Î ÀÚÀ¯ °î¼±À» ±×·Á º¸ÀÚ. ¼±ÀÇ »ö»ó°ú ±½±âµµ ¹Ù²ã º¸°í ¸ðµÎ Áö¿ì´Â ±â´Éµµ ÀÛ¼ºÇØ º¼ °ÍÀÌ´Ù. ĵ¹ö½º ÀÌÀü¿¡´Â HTML ÆäÀÌÁö¿¡ ÀÌ·± ÀÚÀ¯·Î¿î ±×¸²À» ¸¶À½´ë·Î ±×¸± ¼ö°¡ ¾ø¾ú´Ù. ÇÏÁö¸¸ ÀÌÁ¦ ĵ¹ö½º°¡ ±×¸®±â Ç¥¸éÀ» Á¦°øÇØ ÁֹǷΠ¸¶¿ì½º À̺¥Æ®¸¸ Àß Ã³¸®ÇÏ¸é µµÇüÀ» ÀÚÀ¯ ÀÚÀç·Î ±×¸± ¼ö ÀÖ´Ù.

ÀÚÀ¯ °î¼± ±×¸®±â ¿¹Á¦´Â ±×·¡ÇÈÀ» ¹è¿ì´Â °³¹ßÀÚµéÀÌ °¡Àå ¸ÕÀú ¸¸µé¾î º¸´Â ½¬¿î ¿¹Á¦ÀÌ´Ù. ¹°·Ð °¢ ±×·¡ÇÈ ½Ã½ºÅÛ¸¶´Ù °íÀ¯ÇÑ Æ¯¼ºÀ̳ª ¹æ¹ýÀÌ ÀÖ°Ô ¸¶·ÃÀε¥ ÀÌ ¿¹Á¦¸¦ ÅëÇØ Äµ¹ö½º¿¡¼­ÀÇ ±×¸®±â¸¦ ¿¬½ÀÇØ º¸ÀÚ. ¸¶¿ì½º °ü·Ã À̺¥Æ®¸¸ Àß ºÐ¼®ÇØ º¸¸é µÈ´Ù.

 

freeline.html

<!DOCTYPE html>

<head>

     <meta charset="utf-8">

     <title>freeline</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 drawing = false;          // ÇöÀç ±×¸®´Â ÁßÀΰ¡?

        

         window.onload = function() {

              canvas = document.getElementById("canvas");

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

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

              ctx.lineCap="round";

             

              // ÇöÀç À§Ä¡¸¦ ÀúÀåÇÑ´Ù.

              canvas.onmousedown = function(e) {

                   e.preventDefault();

                   sx = canvasX(e.clientX);

                   sy = canvasY(e.clientY);

                   drawing = true;

              }

             

              // ÇöÀç À§Ä¡¿¡¼­ »õ·Î À̵¿ÇÑ °÷±îÁö ¼±À» ±×¸°´Ù.

              canvas.onmousemove = function(e) {

                   if (drawing) {

                        e.preventDefault();

                        ctx.beginPath();

                        ctx.moveTo(sx, sy);

                        sx = canvasX(e.clientX);

                        sy = canvasY(e.clientY);

                        ctx.lineTo(sx, sy);

                        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>

 

»ö»ó, ±½±â ¿É¼ÇÀÌ ¸¹¾Æ¼­ ±×·¸Áö ¸¶¿ì½º À̺¥Æ® ÄÚµå´Â ¾ÆÁÖ °£´ÜÇÏ´Ù. ĵ¹ö½º À§ÂÊ¿¡¼­´Â ¼±ÀÇ »ö»ó°ú ±½±â¸¦ ¼±ÅÃÇÏ´Â ÄÁÆ®·Ñ°ú ¸ðµÎ Áö¿ì±â ¹öÆ°À» ¹èÄ¡Çß´Ù. »ö»ó°ú ±½±â´Â ¸ðµÎ ÄÁÅؽºÆ®ÀÇ ¼Ó¼ºÀ̹ǷΠÀÌ ÄÁÆ®·ÑÀÇ onchange À̺¥Æ® Çڵ鷯¿¡¼­ ÄÁÅؽºÆ®ÀÇ ¼Ó¼º¸¸ º¯°æÇÏ¸é µÈ´Ù. ¸ðµÎ Áö¿ì±â ¹öÆ°Àº ĵ¹ö½º Àü ¿µ¿ªÀ» »èÁ¦ÇÑ´Ù. Å« ±×¸²À» ±×¸± ¼ö ÀÖµµ·Ï ĵ¹ö½º´Â 600 * 400À¸·Î Å­Á÷ÇÏ°Ô ¹èÄ¡Çß´Ù. ±×¸®±â ÄÚµå´Â ĵ¹ö½ºÀÇ ¸¶¿ì½º À̺¥Æ® Çڵ鷯¿¡ ÀÛ¼ºµÇ¾î ÀÖ´Ù. ½ÇÇàÇØ º¸ÀÚ.

onload¿¡¼­ ĵ¹ö½º¸¦ ã°í ÄÁÅؽºÆ®¸¦ ±¸ÇÑ ÈÄ lineCap ¼Ó¼ºÀ» round·Î ÃʱâÈ­ÇÑ´Ù. ±½Àº ¼±À» À̾ ±×¸®¸é °¢µµ°¡ Ä¿Áú ¶§ ²÷¾îÁ® º¸ÀÏ ¼ö ÀÖÀ¸¹Ç·Î ¼± ³¡ÂÊÀ¸·Î ¾à°£ ´õ È®ÀåÇÏ¿© ¿¬¼ÓÀûÀÎ ¼±ÀÌ µÇµµ·Ï ÇÏ¿´´Ù. ĵ¹ö½º¸¦ ãÀº ÈÄ ¸¶¿ì½º À̺¥Æ®¿¡ ´ëÇÑ Çڵ鷯¸¦ µî·ÏÇÑ´Ù. ´ëºÎºÐÀÇ ±×¸®±â´Â ÀÌ Çڵ鷯¿¡¼­ ¼öÇàµÈ´Ù.

¸¶¿ì½º ¹öÆ°À» ´©¸£¸é sx, sy º¯¼ö¿¡ ÇöÀç À§Ä¡¸¦ ÀúÀåÇØ µÐ´Ù. ±×¸®°í drawing º¯¼ö¿¡ true¸¦ ´ëÀÔÇÏ¿© ±×¸®´Â ÁßÀÓÀ» Ç¥½ÃÇÑ´Ù. ¸¶¿ì½º°¡ À̵¿Çϸé sx, sy·Î ÇöÀç À§Ä¡¸¦ ¿Å±â°í »õ À§Ä¡¸¦ sx, sy¿¡ ´Ù½Ã Á¶»çÇÑ ÈÄ ¿©±â±îÁö ¼±À» ±ß´Â´Ù. ÀÌ °úÁ¤À» °è¼Ó ¹Ýº¹ÇÏ¸é ¸¶¿ì½º°¡ À̵¿ÇÏ´Â Á·Á· ÀÌÀü À§Ä¡¿¡¼­ Ä¿¼­°¡ À̵¿ÇÑ À§Ä¡±îÁö Á÷¼±ÀÌ ±×¾îÁø´Ù. ½ÇÁ¦·Î ±×¸®´Â °ÍÀº Á÷¼±ÀÌÁö¸¸ Á÷¼±ÀÇ ±æÀÌ°¡ ª±â ¶§¹®¿¡ °î¼±Ã³·³ º¸ÀδÙ.

ÀÌ·¸°Ô ±×·ÁÁø ±×¸²Àº ĵ¹ö½º¿¡ »õ°ÜÁø´Ù. °¢ ¼±ÀÌ Áö³ª´Â Á¡ÀÇ »ö»ó Á¤º¸°¡ ĵ¹ö½ºÀÇ ºñÆ®¸Ê Ç¥¸é¿¡ ±â·ÏµÈ´Ù. ÀÏ´Ü ±×·ÁÁø ÈÄ¿¡´Â ĵ¹ö½º¿¡ Á¡¸¸ ³²À» »Ó ¾î¶² ¼±À» ±×·È´Â°¡¿¡ ´ëÇÑ Á¤º¸°¡ ¾ø´Ù. µû¶ó¼­ ÀÌ¹Ì ±×·ÁÁø ¼±À» ¿Å±â°Å³ª »ö»óÀ» ¹Ù²Ü ¼ö ¾øÀ¸¸ç ´Ù¸¥ ¼±À¸·Î µ¤¾î¼­ Áö¿ì°Å³ª »õ·Î ±×¸®´Â ¹æ¹ý¹Û¿¡ ¾ø´Ù. ´ë½Å Á÷¼±ÀÇ ÀϺθ¦ ´Ù¸¥ Á÷¼±À¸·Î µ¤À» ¼ö ÀÖ°í Á÷¼±ÀÌ ¾Æ¹«¸® ¸¹¾ÆÁ®µµ »ó°ü¾ø´Ù. ¾îÂ÷ÇÇ Äµ¹ö½ºÀÇ Ç¥¸éÀº ÀÏÁ¤ÇϹǷΠ¼±À» ¸¹ÀÌ ±×¸°´Ù°í Çؼ­ ¸Þ¸ð¸® »ç¿ë·®ÀÌ ´Ã¾î³ª°Å³ª ¼Óµµ°¡ ´À·ÁÁöÁö ¾Ê´Â´Ù. ÀÌ°ÍÀÌ Áï½Ã ¸ðµåÀÇ ÀåÁ¡ÀÌ´Ù.