[html-ig-ko] canvas 2D API °ü·ÃÇؼ­ °³¼±ÀÌ ÀÖ¾úÀ½ ÁÁÀ» °Í °°½À´Ï´Ù.

¾È³çÇϼ¼¿ä. Àúµµ °¡ÀÔÇß½À´Ï´Ù. :)

¿ä»õ canvas¸¦ ÀÌ¿ëÇؼ­ ¿©·¯°¡Áö¸¦ ½ÃµµÇغ¸°í Àִµ¥,
line ÇÔ¼ö¿Í path °ü·Ã ±â´ÉÀÌ ±²ÀåÈ÷ ºó¾àÇϳ׿ä.

¹®¼­°¡ ¾ÆÁ÷ WD ´Ü°èÀ롃 º¸¸é °³¼±ÀÌ °¡´ÉÇҰŶó »ý°¢Çϴµ¥,
Àü ´ÙÀ½°ú °°Àº ±â´ÉµéÀÌ Ãß°¡µÇ¸é ÁÁÀ»°Å¶ó »ý°¢ÇÕ´Ï´Ù.


1. brush¸¦ ÀÌ¿ëÇÑ µå·ÎÀ®

pattern À» »ý¼ºÇؼ­ lineStyle·Î ÁöÁ¤Çϸé ÀÌ·± È¿°ú¸¦ ³¾ ¼ö
ÀÖÁö ¾ÊÀ»±î Çؼ­ ÇÑ ¹ø ½Ãµµ¸¦ Çغôµ¥, 'repeat' ÀÎÀÚ¿Í ÇÔ²²
patternÀ» »ý¼ºÇÒ °æ¿ì path¸¦ µû¶ó(lineÀ» µû¶ó) patternÀÌ
±×·ÁÁö´Â °ÍÀÌ ¾Æ´Ï¶ó À̹ÌÁö Àüü¿¡ ´ëÇØ °íÁ¤µÈ ÆÐÅÏÀÌ
±×·ÁÁ® ÀÖ°í, Á¦°¡ ±×¸®´Â ¼±À» µû¶ó ±×·ÁÁ®ÀÖ´ø ÆÐÅÏÀÌ
µå·¯³ª´Â ½ÄÀ¸·Î µ¿ÀÛÀ» Çϳ׿ä.

¹°·Ð globalAlpha °ªÀ» ÁöÁ¤ÇÏ°í ¼±°ú ¼± »çÀÌ À§Ä¡¸¦ Á÷Á¢
°è»êÇØ°¡¸é¼­ ¾Æ·¡¿Í °°Àº Äڵ带 Á÷Á¢ ¼öÇàÇÏ´Â ¹æ¹ýµµ
ÀÖ°ÚÁö¸¸ ÀÌ·± API°¡ Á¦°øµÉ °æ¿ì ÈξÀ ´Ùä·Î¿î µ¿ÀÛÀÌ
°¡´ÉÇØÁú °ÍÀ̶ó »ý°¢ÇÕ´Ï´Ù.

context.save();

for( some pos ){
context.translate(...);
context.drawImage(....);
}

context.restore();


2. brush¿¡ ´ëÇÑ callback ÁöÁ¤ °¡´É ±â´É?

photoshop µî¿¡¼­ brush¸¦ »ç¿ëÇغ¸¸é,
¿òÁ÷ÀÓ¿¡ µû¶ó bursh °¡ dynamicÇÏ°Ô º¯ÇüµÉ ¼ö ÀÖ´Â
°ÍÀ» È®ÀÎÇÒ ¼ö ÀÖ½À´Ï´Ù. (rotation, size variation, ...)

ÀÌ·± ±â´ÉÀº brush°¡ »ç¿ëµÉ ¶§¸¶´Ù callbackÀ» È£ÃâÇÒ ¼ö
ÀÖµµ·Ï Á¤ÀÇµÈ´Ù¸é ½±°Ô ±¸Çö(»ç¿ë)ÀÌ °¡´ÉÇØÁú °Í °°½À´Ï´Ù.


°£´ÜÇÏ°Ô »ý°¢Çغ»°Å¶ó ¼¼ºÎÀûÀ¸·Î´Â °í¹ÎÇغÁ¾ßÇÒ °ÍµéÀÌ
¸¹°ÚÁö¸¸ Á¶¿ëÈ÷ ¶±¹ä Çϳª ÅõôÇÏ°í °©´Ï´Ù. :D


°¨»çÇÕ´Ï´Ù.

Á¤Å¿µ µå¸².

Received on Monday, 1 November 2010 15:06:24 UTC