4-1-2.È®´ë

À̵¿ º¯È¯Àº ÁÂÇ¥°èÀÇ ¿øÁ¡À» À̵¿½ÃÅ°´Âµ¥ ºñÇØ È®´ë º¯È¯Àº ÁÂÇ¥ÀÇ °£°ÝÀ» º¯È­½ÃŲ´Ù. ´ÙÀ½ ¸Þ¼­µå·Î È®´ë º¯È¯À» ÁöÁ¤ÇÑ´Ù.

 

scale(x, y)

 

x´Â ¼öÆòÂÊ È®´ë ¹èÀ²ÀÌ°í y´Â ¼öÁ÷ÂÊ È®´ë ¹èÀ²ÀÌ´Ù. ÀÌ °ªÀÌ 2¸é 2¹è È®´ëÀÌ°í 1.5À̸é 1.5¹è È®´ëÀÌ´Ù. ´ÙÀ½ ¿¹Á¦´Â »ç°¢ÇüÀ» 2¹è È®´ëÇÏ¿© Ãâ·ÂÇÑ´Ù.

 

scale.html

function draw() {

     ctx.fillStyle="blue";

     ctx.fillRect(50,50,30,30);

 

     ctx.scale(2, 2);

     ctx.fillStyle="red";

     ctx.fillRect(50,50,30,30);

}

 

°¡·Î, ¼¼·Î ¸ðµÎ 2¹è È®´ëÇÏ¿´À¸¹Ç·Î (50, 50) ÁÂÇ¥´Â º¯È¯ ÀüÀÇ (100, 100) ÁÂÇ¥°¡ µÇ°í »ç°¢ÇüÀÇ Å©±â´Â 60Çȼ¿·Î 2¹è°¡ µÈ´Ù.

 

¿øÁ¡Àº Á»ó´Ü¿¡ ±×´ë·Î ÀÖÁö¸¸ ´«±Ý »çÀÌÀÇ °£°ÝÀÌ 2¹è·Î ³Ð¾îÁø´Ù. ¸ðµç Ãâ·Â ÁÂÇ¥¿Í Å©±â¿¡ 2¸¦ °öÇÏ´Â °Í°ú °°´Ù.

¾çÂÊÀÇ È®´ë ¹èÀ²ÀÌ ²À ÀÏÄ¡ÇÒ ÇÊ¿ä´Â ¾ø´Ù. ´ÙÀ½ ¿ÞÂÊ ±×¸²Àº scale2.htmlÀÇ ½ÇÇà °á°úÀ̸ç scale(3, 2)·Î ÁöÁ¤ÇÏ¿© ¼öÆòÀ¸·Î 3¹è, ¼öÁ÷À¸·Î 2¹è È®´ëÇÑ °ÍÀÌ´Ù. È®´ë ¹èÀ²À» 1º¸´Ù ´õ ÀÛÀº °ªÀ» ÁöÁ¤Çϸé Ãà¼Òµµ ¹°·Ð °¡´ÉÇÏ´Ù. ´ÙÀ½ ¿À¸¥ÂÊ ±×¸²Àº scale(0.5, 0.5)·Î ÁöÁ¤ÇÏ¿© Àý¹ÝÀ¸·Î Ãà¼ÒÇÑ scale3.htmlÀÇ °á°úÀÌ´Ù.

 

¿©·¯ °¡Áö º¯È¯À» µ¿½Ã¿¡ Àû¿ëÇÒ ¼ö ÀÖÀ¸¸ç º¯È¯Àº ´©ÀûÀûÀ¸·Î Àû¿ëµÈ´Ù. À̶§ º¯È¯ÀÇ ¼ø¼­°¡ Áß¿äÇѵ¥ ´Ê°Ô Àû¿ëÇÑ °ÍÀÌ ¸ÕÀú Àû¿ëµÈ´Ù. º¯È¯ ¼ø¼­¿¡ µû¶ó Ãâ·Â °á°ú°¡ ´Þ¶óÁø´Ù. ´ÙÀ½ ¿¹Á¦·Î º¯È¯ÀÇ ¼ø¼­¸¦ Å×½ºÆ®ÇØ º¸ÀÚ.

 

transorder.html

function draw() {

     ctx.fillStyle="blue";

     ctx.fillRect(10,10,30,30);

    

     ctx.translate(50,50);

     ctx.scale(2,2);

     ctx.fillStyle="red"

     ctx.fillRect(10,10,30,30);

    

     ctx.setTransform(1,0,0,1,0,0);

     ctx.scale(2,2);

     ctx.translate(50,50);

     ctx.fillStyle="green"

     ctx.fillRect(10,10,30,30);

}

 

(10, 10)¿¡ Ãâ·ÂÇÑ ÆĶõ»ö »ç°¢ÇüÀº º¯È¯Çϱâ ÀüÀÇ ÁÂÇ¥°è¸¦ »ç¿ëÇÑ´Ù. »¡°£»ö »ç°¢ÇüÀº È®´ë ÈÄ À̵¿ÇÑ °á°úÀ̸ç ÃÊ·Ï»ö »ç°¢ÇüÀº À̵¿ ÈÄ È®´ëÇÑ °á°úÀÌ´Ù. Áß°£ÀÇ setTransform È£Ãâ¹®Àº ´ÜÀ§ Çà·ÄÀ» Àû¿ëÇÏ¿© º¯È¯À» ¸®¼ÂÇÏ´Â ¿ªÇÒÀ» ÇÑ´Ù. (50, 50)¸¸Å­ À̵¿ÇÏ°í 2¹è È®´ëÇ쵂 º¯È¯ÀÇ Àû¿ë ¼ø¼­¸¸ ´Ù¸£¸ç µû¶ó¼­ Ãâ·Â °á°úµµ ´Ù¸£´Ù.

¾î°¼­ ÀÌ·± °á°ú°¡ ³ª¿À´ÂÁö ¼ö½ÄÀ¸·Î ¿¬±¸ÇØ º¸ÀÚ. À̵¿ º¯È¯Àº ÁÂÇ¥¿¡ µ¡¼ÀÀ» ÇÏ´Â °ÍÀÌ°í È®´ë º¯È¯Àº ÁÂÇ¥¿¡ °ö¼ÀÀ» ÇÏ´Â °ÍÀÌ´Ù. ÆĶõ»ö »ç°¢ÇüÀÇ ¼öÆò ÁÂÇ¥ 10Àº µÎ º¯È¯¿¡ ÀÇÇØ ´ÙÀ½°ú °°ÀÌ ¹Ù²ï´Ù.

 

È®´ë ÈÄ À̵¿ : 10 * 2 + 50 = 70

À̵¿ ÈÄ È®´ë : (10 + 50) * 2 = 120

 

µ¡¼À°ú °ö¼ÀÀÇ ¿ì¼± ¼øÀ§°¡ ´Ù¸£±â ¶§¹®¿¡ ÀÌ·± Â÷ÀÌ°¡ ¹ß»ýÇÏ´Â °ÍÀÌ´Ù. È®´ëÇÑ ÈÄ À̵¿ÇÏ´Â °Í¿¡ ºñÇØ À̵¿ÇÑ ÈÄ È®´ëÇϸé À̵¿ÇÑ °ªµµ °öÇØÁö¹Ç·Î ÃÊ·Ï»ö »ç°¢ÇüÀÌ ÈξÀ ´õ ¸Ö¸® À̵¿ÇÑ´Ù. À̵¿, È®´ë »Ó¸¸ ¾Æ´Ï¶ó ÀÌÈÄÀÇ È¸Àü, ±â¿ïÀ̱⠺¯È¯±îÁö °°ÀÌ Àû¿ëÇصµ ÀÌ ¿ø¸®´Â µ¿ÀÏÇÏ°Ô Àû¿ëµÈ´Ù. ¿øÇÏ´Â º¯È¯ÀÌ ¹«¾ùÀΰ¡¿¡ µû¶ó ¼ø¼­¸¦ Àß °áÁ¤ÇØ¾ß ÇÑ´Ù.

È®´ë º¯È¯ÀÇ Àç¹ÌÀÖ´Â Á¡Àº À½¼ö È®´ë ¹èÀ²µµ Àû¿ëÇÒ ¼ö ÀÖ´Ù´Â Á¡ÀÌ´Ù. 0º¸´Ù ´õ ÀÛÀº °ªÀ» ¹èÀ²·Î ÁöÁ¤Çϸé ÀÌ °ªÀÌ ÁÂÇ¥ÀÇ ºÎÈ£¸¦ ¹Ù²Ù¾î Á¿ì¿Í »óÇÏ°¡ µÚÁýÇô °Å¿ï¿¡ ¹Ý»çµÈ µíÇÑ ¹Ì·¯¸µ(Mirroring) È¿°ú°¡ ³ªÅ¸³­´Ù. À̹ÌÁö¿¡ Àû¿ëÇϸé À̹ÌÁö¸¦ µÚÁý¾î Ãâ·ÂÇÒ ¼ö ÀÖ´Ù.

 

mirroring.html

function draw() {

     var img = new Image();

     img.src="hodori.jpg"

     img.onload = function() {

         ctx.translate(160, 0);

         ctx.scale(-1, 1);

         ctx.drawImage(img, 0, 0);

     }

}

 

È£µ¹À̸¦ Ãâ·ÂÇ쵂 scale(-1, 1)À» Àû¿ëÇÏ¿© ¼öÆòÀ¸·Î µÚÁý¾ú´Ù. ÀÌ·¸°Ô µÇ¸é ¼öÆò ÁÂÇ¥ 100Àº -1ÀÌ °öÇØÁ® -100ÀÌ µÈ´Ù. ÀÌ´ë·Î Ãâ·ÂÇϸé ĵ¹ö½º ¿ÞÂÊÀÇ °¡·ÁÁø ¿µ¿ª¿¡ Ãâ·ÂµÇ¹Ç·Î ĵ¹ö½º ¾ÈÂÊÀ¸·Î °¡Á® ¿À·Á¸é À̵¿ º¯È¯µµ °°ÀÌ Àû¿ëÇØ¾ß ÇÑ´Ù. È£µ¹ÀÌ À̹ÌÁöÀÇ ÆøÀÌ 160À̹ǷΠ160¸¸Å­ ¿À¸¥ÂÊÀ¸·Î À̵¿½ÃÄ×´Ù.

¾Æ´Ï¸é ¾Æ¿¹ drawImageÀÇ Ãâ·Â ÁÂÇ¥¸¦ -160À¸·Î ÁöÁ¤ÇÏ¿© È­¸é ¿ÞÂÊ¿¡ Ãâ·ÂÇÑ ÈÄ ¹ÝÀü½ÃÄѵµ »ó°ü¾ø´Ù. ÀÌ ¿¹Á¦¿¡¼­ ÁÖÀÇÇÒ Á¡Àº ¹Ý»ç¸¦ ¸ÕÀú ÇÏ°í À̵¿À» ÇØ¾ß ÇÑ´Ù´Â Á¡ÀÌ´Ù. ¼ø¼­°¡ ¹Ù²î¸é À̵¿ÇÑ ÈÄ À½¼ö ¿µ¿ªÀ¸·Î ¹Ý»çµÇ¾î ¹ö¸®¹Ç·Î º¸ÀÌÁö ¾Ê´Â´Ù.

scale(1, -1)·Î ¼öÁ÷ ÁÂÇ¥¸¦ µÚÁýÀ¸¸é ¾Æ·¡ÂÊ¿¡ ¹Ý»çµÈ ¸ð¾çÀ» ¸¸µé ¼öµµ ÀÖ´Ù. ¹Ý»çÇÑ À̹ÌÁö¸¦ ¾Æ·¡ÂÊ¿¡ ³õµÇ Åõ¸í ±×¶óµ¥À̼ÇÀ» Àû¿ëÇϸé Á¤¸» ¹Ý»çµÈ µíÇÑ À̹ÌÁö°¡ ¸¸µé¾îÁø´Ù. È®´ë º¯È¯À» ÅؽºÆ®¿¡ Àû¿ëÇÏ¸é ¶×¶×Çϰųª ȦÂßÇÑ ±ÛÀÚ¸¦ Ãâ·ÂÇÒ ¼ö ÀÖ´Ù. º¯È¯Àº ¿©·¯ ¸ð·Î ÀÀ¿ëÀÇ Àç¹Ì°¡ ÀÖ´Â ±â¼úÀÌ´Ù.