À̵¿ º¯È¯Àº ÁÂÇ¥°èÀÇ ¿øÁ¡À» À̵¿½ÃÅ°´Âµ¥ ºñÇØ È®´ë º¯È¯Àº ÁÂÇ¥ÀÇ °£°ÝÀ» º¯È½ÃŲ´Ù. ´ÙÀ½ ¸Þ¼µå·Î È®´ë º¯È¯À» ÁöÁ¤ÇÑ´Ù.
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)·Î ¼öÁ÷ ÁÂÇ¥¸¦ µÚÁýÀ¸¸é ¾Æ·¡ÂÊ¿¡ ¹Ý»çµÈ ¸ð¾çÀ»
¸¸µé ¼öµµ ÀÖ´Ù. ¹Ý»çÇÑ À̹ÌÁö¸¦ ¾Æ·¡ÂÊ¿¡ ³õµÇ Åõ¸í ±×¶óµ¥À̼ÇÀ» Àû¿ëÇϸé Á¤¸» ¹Ý»çµÈ µíÇÑ À̹ÌÁö°¡
¸¸µé¾îÁø´Ù. È®´ë º¯È¯À» ÅؽºÆ®¿¡ Àû¿ëÇÏ¸é ¶×¶×Çϰųª ȦÂßÇÑ ±ÛÀÚ¸¦ Ãâ·ÂÇÒ ¼ö ÀÖ´Ù. º¯È¯Àº ¿©·¯ ¸ð·Î ÀÀ¿ëÀÇ Àç¹Ì°¡ ÀÖ´Â ±â¼úÀÌ´Ù.