1-1-2.ĵ¹ö½º ¿¹Á¦

ĵ¹ö½º´Â <canvas> ű׷ΠÃâ·Â ¿µ¿ªÀ» ÁöÁ¤Çϸç ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ±×¸®±â ¸Þ¼­µå¸¦ È£ÃâÇÏ¿© ĵ¹ö½º¿¡ ¿øÇÏ´Â ±×¸²À» ±×¸°´Ù. ĵ¹ö½º¸¦ »ç¿ëÇÏ´Â °¡Àå °£´ÜÇÑ Çü½ÄÀº ´ÙÀ½°ú °°´Ù.

 

canvastest.html

<!DOCTYPE html>

<head>

     <meta charset="utf-8">

     <title>canvastest</title>

</head>

<body>

     <p>ĵ¹ö½º¿¡ Á÷Á¢ ±×¸°´Ù.</p>

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

     </canvas>

     <script>

         window.onload = function() {

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

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

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

              ctx.strokeRect(10,10,100,100);

         }

     </script>

</body>

</html>

 

<p> ű׷Π¹®´ÜÀ» ¹èÄ¡ÇÏ°í <canvas> ű׷Πĵ¹ö½º¸¦ Á¤ÀÇÇÑ´Ù. <canvas>µµ ´Ù¸¥ ÅÂ±×¿Í ¸¶Âù°¡Áö ÀÚ°ÝÀ» °¡Áø´Ù´Â °ÍÀ» º¸À̱â À§ÇØ ¹®´Ü°ú ÇÔ²² ¹èÄ¡Çß´Ù. ĵ¹ö½º ¾Æ·¡ÂÊ¿¡µµ ¹°·Ð ´Ù¸¥ ű׸¦ ¾ó¸¶µçÁö ¹èÄ¡ÇÒ ¼ö ÀÖÀ¸¸ç ¿©·¯ °³ÀÇ Äµ¹ö½º¸¦ ¹èÄ¡ÇÒ ¼öµµ ÀÖ´Ù. ĵ¹ö½ºÀÇ ÁÖ¿ä ¼Ó¼ºÀº ´ÙÀ½ ¼¼ °³°¡ ÀÖ´Ù.

 

¡á id : ĵ¹ö½º´Â ±×¸®±â ¿µ¿ª¸¸ Á¤ÀÇÇÒ »ÓÀÌ¸ç ±×¸®±â µ¿ÀÛÀº Äڵ忡¼­ ó¸®ÇÑ´Ù. ½ºÅ©¸³Æ®¿¡¼­ ĵ¹ö½º¸¦ ÂüÁ¶ÇØ¾ß ÇϹǷΠ¹Ýµå½Ã id¸¦ ÁöÁ¤ÇØ¾ß ÇÑ´Ù. ¿©·¯ °³ÀÇ Äµ¹ö½º¸¦ ¹èÄ¡ÇÒ °æ¿ì °¢°¢ ´Ù¸¥ id¸¦ ÁÖ¾î¾ß ÇÑ´Ù.

¡á width, height : ĵ¹ö½ºÀÇ Å©±â¸¦ Çȼ¿ ´ÜÀ§·Î ÁöÁ¤ÇÏ¸ç ½ÇÇàÁß¿¡ Å©±â¸¦ º¯°æÇÏ´Â °Íµµ °¡´ÉÇÏ´Ù. µðÆúÆ® Å©±â´Â 300 * 150À¸·Î Á¼°Ô ¼³Á¤µÇ¾î Àִµ¥ ±×¸®°íÀÚ ÇÏ´Â ³»¿ëÀ» ÃæºÐÈ÷ Ç¥ÇöÇÒ¸¸ÇÑ Å©±â·Î º¯°æÇÏ¸é µÈ´Ù.

 

ÀÌ 3°³ÀÇ ¼Ó¼ºÀº °ÅÀÇ ÇʼöÀûÀ¸·Î ÁöÁ¤ÇØ¾ß ÇÑ´Ù. ¹°·Ð ÀÌ ¿Ü¿¡µµ class, title, hidden °°Àº Àü¿ª ¼Ó¼ºµµ ÁöÁ¤ÇÒ ¼ö ÀÖ´Ù. ĵ¹ö½º¸¦ ¹èÄ¡ÇÑ ÈÄ ÀÚ¹Ù½ºÅ©¸³Æ®¿¡¼­ ±×¸®±â ¸Þ¼­µå¸¦ È£ÃâÇÏ¿© ±×·¡ÇÈÀ» Ãâ·ÂÇÑ´Ù. ÆäÀÌÁö°¡ ¿ÏÀüÈ÷ ·ÎµåµÈ ÈÄ¿¡ ±×·Á¾ß ÇϹǷΠwindowÀÇ onload À̺¥Æ®¿¡ ±×¸®±â Äڵ带 ÀÛ¼ºÇÏ´Â °ÍÀÌ ÁÁ´Ù. ±×¸²¸¸ ±×¸± ¶§´Â ¾Æ¹« ¶§³ª ±×·Áµµ »ó°ü¾øÁö¸¸ À̹ÌÁö³ª »ç¿îµå°°Àº ºÎ¼Ó ÆÄÀÏÀÌ ÀÖ´Â °æ¿ì´Â ºÎ¼Ó ÆÄÀϱîÁö ·ÎµåµÇ¾î¾ß Á¦´ë·Î µ¿ÀÛÇÒ ¼ö ÀÖ´Ù. ÀÌ ½ÃÁ¡ÀÌ ¹Ù·Î onloadÀÌ´Ù.

getElementById ¸Þ¼­µå·Î ĵ¹ö½º °´Ã¼¸¦ ¸ÕÀú ã°í ĵ¹ö½ºÀÇ getContext ¸Þ¼­µå·Î ±×¸®±â ÄÁÅؽºÆ®¸¦ ±¸ÇÑ´Ù. ¾ÆÁ÷±îÁö´Â ¿¡·¯ 󸮰¡ ÇÊ¿äÇÏ´Ù. canvas űװ¡ ¹®¼­¿¡ ¾øÀ¸¸é ±×¸± ¿µ¿ªÀÌ ¾ø´Ù´Â ¶æÀÌ°í ÄÁÅؽºÆ®¸¦ ã´Â ¸Þ¼­µå°¡ ¾ø´Ù¸é ºê¶ó¿ìÀú°¡ ĵ¹ö½º¸¦ Áö¿øÇÏÁö ¾Ê´Â´Ù´Â ¶æÀÌ´Ù. ÀÌ °æ¿ì´Â ´õ ÀÌ»ó ±×¸®±â¸¦ ÇÏÁö ¸»°í ¹Ù·Î ¸®ÅÏÇØ¾ß ÇÑ´Ù.

ÄÁÅؽºÆ®´Â ĵ¹ö½ºÀÇ ±×¸®±â ¿µ¿ªÀ̸鼭 ±×¸®±â ¸Þ¼­µå¸¦ °¡Áö´Â °´Ã¼ÀÌ´Ù. getContext ¸Þ¼­µåÀÇ Àμö·Î ¿øÇÏ´Â ÄÁÅؽºÆ®ÀÇ Á¾·ù¸¦ Àü´ÞÇÑ´Ù. ÇöÀç´Â 2d ±×¸®±â¸¸ °¡´ÉÇϳª OpenGL ES¸¦ °³·®ÇÑ WebGLÀÌ °³¹ßµÇ°í ÀÖ´Â ÁßÀ̹ǷΠÁ¶¸¸°£ 3d ±×¸®±â·Î È®ÀåµÉ ¿¹Á¤ÀÌ´Ù. getContextÀÇ Àμö·Î Àü´ÞµÇ´Â ÄÁÅؽºÆ® Á¾·ù´Â ¹®ÀÚ¿­À̹ǷΠ¹Ýµå½Ã µû¿ÈÇ¥·Î °¨½Î "2d"¶ó°í Àû¾î¾ß ÇÏ¸ç ´ë¹®ÀÚ¸¦ ÀÎÁ¤ÇÏÁö ¾ÊÀ¸¹Ç·Î "2D"¶ó°í Àû¾î¼­´Â ¾ÈµÈ´Ù.

 

canvas.getContext("2d")            // ¸ÂÀ½

canvas.getContext("2D")           // Ʋ¸²

canvas.getContext(2d)              // Ʋ¸²  

 

getContext("2d") È£Ãâ·Î CanvasRenderingContext2D ŸÀÔÀÇ °´Ã¼°¡ ¸®ÅϵǴµ¥ ÀÌ °´Ã¼°¡ ¹Ù·Î ±×¸®±â ¸Þ¼­µå¿Í ¼Ó¼ºÀ» °¡Áö´Â ÄÁÅؽºÆ®ÀÌ´Ù. ÄÁÅؽºÆ®¸¦ ctx º¯¼ö¿¡ ´ëÀÔÇÏ°í ÀÌÈĺÎÅÍ ctxÀÇ ¸Þ¼­µå·Î ±×¸®±â¸¦ ¼öÇàÇÑ´Ù. ¿¹Á¦¿¡¼­´Â strokeRect ¸Þ¼­µå·Î »ç°¢ÇüÀ» ±×·È´Ù. ĵ¹ö½º ¾ÈÂÊ¿¡ ȸ»ö »ç°¢ÇüÀÌ Ãâ·ÂµÈ´Ù.

 

À§ ¿¹Á¦´Â ĵ¹ö½º¸¦ »ç¿ëÇÏ´Â ±âº»ÀûÀÎ ÀýÂ÷¸¦ Àß º¸¿© ÁØ´Ù. ¹®¼­ÀÇ Àû´çÇÑ À§Ä¡¿¡ ĵ¹ö½º ű׸¦ ¹èÄ¡ÇÏ°í ¹®¼­ ·Îµå°¡ ¿Ï·áµÇ´Â onload À̺¥Æ®¿¡ ±×¸®±â Äڵ带 ÀÛ¼ºÇÑ´Ù. ĵ¹ö½º °´Ã¼¸¦ ã°í ĵ¹ö½º·ÎºÎÅÍ ÄÁÅؽºÆ®¸¦ ±¸ÇÑ ÈÄ ÄÁÅؽºÆ®ÀÇ ±×¸®±â °ü·Ã ¸Þ¼­µå¸¦ È£ÃâÇÏ´Â ½ÄÀÌ´Ù. ÀÌ ÄÚµå´Â °ÅÀÇ Á¤ÇüÈ­µÇ¾î ÀÖÀ¸¸ç ÀÌÈÄ ´Þ¶óÁö´Â ºÎºÐÀº ÄÁÅؽºÆ®¿¡¼­ È£ÃâÇÏ´Â ¸Þ¼­µåÀÌ´Ù. ¾î¶² ¸Þ¼­µå¸¦ È£ÃâÇÒ °ÍÀΰ¡¿¡ µû¶ó Ãâ·ÂÀÌ ´Þ¶óÁø´Ù.

ĵ¹ö½º¸¦ ã°í ÄÁÅؽºÆ®¸¦ ±¸ÇÏ°í ¿¡·¯ ó¸®ÇÏ´Â °úÁ¤Àº Ç×»ó ¹Ýº¹µÇ´Â °úÁ¤À̸ç È£ÃâÇÏ´Â ±×¸®±â ¸Þ¼­µå¸¸ ´Þ¶óÁú »ÓÀÌ´Ù. ½Ç½À ÆíÀÇ¿Í ¿¡·¯ ó¸®, ±×¸®°í ¸íÈ®ÇÑ °á°ú È®ÀÎÀ» À§ÇØ ¿¹Á¦¸¦ ´ÙÀ½°ú °°ÀÌ ÀçÀÛ¼ºÇÏ¿´´Ù.

 

canvasexample.html

<!DOCTYPE html>

<head>

     <meta charset="utf-8">

     <title>canvasexample</title>

     <style>

         canvas {border:5px solid magenta;}

     </style>

</head>

<body>

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

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

     </canvas>

     <script>

         var canvas;

         var ctx;

         window.onload = function() {

              canvas = document.getElementById("canvas");

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

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

              draw();

         }

        

         function draw() {

              ctx.strokeRect(10,10,100,100);

         }

     </script>

</body>

</html>

 

ĵ¹ö½º ÀÚü´Â ±×¸®±â ¿µ¿ªÀÏ »ÓÀ̹ǷΠ³»¿ë¹°ÀÌ ¾ø´Ù. ¾Æ¹«°Íµµ ±×¸®Áö ¾ÊÀ¸¸é ºó »ç°¢ÇüÀ̶ó Á¸Àç°¡ º¸ÀÌÁö ¾Ê´Â´Ù. ±×·¡¼­ ½ºÅ¸ÀÏÀ» ÁöÁ¤ÇÏ¿© 5Çȼ¿ÀÇ µÎ²¨¿î ºÐÈ«»ö °æ°è¼±À» ±×·Á ³Ö¾ú´Ù. Á» À¯Ä¡ÇÏÁö¸¸ Äڵ忡 ÀÇÇÑ ±×·¡ÇÈ Ãâ·Â°ú ±¸ºÐÇϱâ À§ÇØ Àß ¾È¾²´Â »öÀ¸·Î ÁöÁ¤Çß´Ù. ½ÇÇà °á°ú´Â ´ÙÀ½°ú °°´Ù. ºÐÈ«»ö °æ°è°¡ ¾øÀ¸¸é ¾îµð°¡ ĵ¹ö½º ¿µ¿ªÀÎÁö ±¸ºÐµÇÁö ¾Ê´Â´Ù. ¹°·Ð ½ÇÁ¦ ÇÁ·ÎÁ§Æ®¿¡¼­´Â °æ°è¼±ÀÌ ¾ø¾îµµ ¹«¹æÇÏ´Ù.

<canvas> ű×ÀÇ ¾ÈÂÊ¿¡´Â ĵ¹ö½º¸¦ Áö¿øÇÏÁö ¸øÇÏ´Â ºê¶ó¿ìÀú¸¦ À§ÇØ ´ëü¹°À» ³Ö´Â´Ù. ĵ¹ö½º Å©±â¿Í µ¿ÀÏÇÑ À̹ÌÁö°¡ °¡Àå ÀÌ»óÀûÀÌ´Ù. Å©±â°¡ µ¿ÀÏÇØ¾ß ·¹À̾ƿôÀÌ À¯ÁöµÈ´Ù. ÀÌ¿ÕÀ̸é À̹ÌÁöÀÇ alt ¼Ó¼º¿¡ ¼³¸íÀ» ÀÛ¼ºÇÏ¿© ½Ã°¢ Àå¾ÖÀεµ ¹è·ÁÇÏ´Â °ÍÀÌ ÁÁ´Ù. ¿¹Á¦¿¡¼­´Â °£´ÜÇÏ°Ô ¾È³» ¹®ÀÚ¿­¸¸ ³Ö¾ú´Ù.

ĵ¹ö½º¿Í ÄÁÅؽºÆ® °´Ã¼ canvas, ctx¸¦ ÄÚµåÀÇ ¾îµð¿¡¼­³ª ÂüÁ¶ÇÒ ¼ö ÀÖµµ·Ï Àü¿ª º¯¼ö·Î ¼±¾ðÇß´Ù. ÀÌ µÎ °´Ã¼´Â ĵ¹ö½º¸¦ ÇÁ·Î±×·¡¹ÖÇÏ·Á¸é ´Ã ÇÊ¿äÇϹǷΠÀü¿ªÀ¸·Î ¼±¾ðÇÏ´Â °ÍÀÌ Æí¸®ÇÏ´Ù. »ç½Ç canvas °´Ã¼´Â ctxÀÇ canvas ¼Ó¼ºÀ¸·Îµµ ±¸ÇÒ ¼ö ÀÖÀ¸¹Ç·Î ±»ÀÌ Àü¿ªÀÌ ¾Æ´Ï¾îµµ »ó°ü¾øÁö¸¸ ÇÑ ´Ü°è ´õ °ÅÄ¡´Â °ÍÀÌ ±ÍÂú¾Æ µû·Î ¼±¾ðÇØ µÎ¾ú´Ù.

onloadÀÇ À̺¥Æ® Çڵ鷯¿¡¼­ ÇÏ´Â ÀÏÀº °ÅÀÇ ÀÏÁ¤ÇϹǷΠ´õ ÀÌ»ó »ìÆ캼 ÇÊ¿ä°¡ ¾ø´Ù. ±×·¡¼­ ±×¸®±â¿Í °ü·ÃµÈ Äڵ常 draw ¸Þ¼­µå·Î ºÐ¸®Çß´Ù. draw´Â Àü¿ªÀ¸·Î ¼±¾ðµÈ ctxÀÇ ¸Þ¼­µå¸¦ È£ÃâÇÏ¿© ±×¸²À» Ãâ·ÂÇÏ°í ±×¸®±â ¼Ó¼ºÀ» º¯°æÇÑ´Ù. ÀÌÈÄ ½Ç½À¿¡¼­´Â draw ¸Þ¼­µå ¾ÈÂʸ¸ º¸À̱â·Î ÇÑ´Ù. Áö¸é Àý¾à»Ó¸¸ ¾Æ´Ï¶ó µ¶ÀÚµéÀÌ »ìÆìºÁ¾ß ÇÒ Äڵ带 ÃÖ¼ÒÇÏÇÏ¿© ÁýÁßÇϱ⠽±µµ·Ï Çϱâ À§Çؼ­ÀÌ´Ù.

½ÇÇà°á°úµµ ºÐÈ«»ö »ç°¢Çü ¾ÈÂʸ¸ ´Þ¶óÁö¹Ç·Î ±»ÀÌ ºê¶ó¿ìÀú Àüü¸¦ ´Ù º¸ÀÏ ÇÊ¿ä°¡ ¾øÀ¸¸ç ÀÌ »ç°¢Çü ¾ÈÂʸ¸ Áö¸é¿¡ ĸóÇؼ­ º¸À̵µ·Ï ÇÑ´Ù. ¹°·Ð ÀÌ ¼Ò½º´Â ½Ç½À ÆíÀǸ¦ À§ÇØ ÀÛ¼ºÇÑ °Í »ÓÀ̹ǷΠ½ÇÁ¦ ÇÁ·ÎÁ§Æ®ÀÇ ÇüÅ´ ´Ù¾ÓÇÒ °ÍÀÌ´Ù. ÀÌ ±¸Á¶¿Í ´Þ¶óÁö´Â ¿¹Á¦¸¸ Àüü ¼Ò½º¸¦ º¸ÀÏ °ÍÀÌ´Ù.