2-2-1.ÅؽºÆ® Ãâ·Â

ÅؽºÆ®´Â À¥ ÆäÀÌÁö¸¦ ±¸¼ºÇÏ´Â ±âº» ³»¿ëÀÌ´Ù. º¸Åë HTML·Î Ãâ·ÂÇÏ°í CSS·Î Àå½ÄÇϴµ¥ CSSÀÇ ±â´ÉÀÌ ÈǸ¢Çϱâ´Â Çصµ Á¦¾àÀÌ ¸¹´Ù. ĵ¹ö½º´Â ¹®ÀÚ¸¦ Á÷Á¢ ±×¸²À¸·Î½á Ç¥ÇöÀÇ ÇÑ°è°¡ °ÅÀÇ ¾ø´Ù. °ÔÀÓÀ» ÀÛ¼ºÇϰųª º¸°í¼­, ±×·¡ÇÁ¸¦ ±×¸± ¶§ ÀÓÀÇ À§Ä¡¿¡ ¿øÇÏ´Â ¸ð¾çÀ¸·Î ¹®ÀÚ¸¦ ±×·Á ³ÖÀ» ¼ö ÀÖ´Ù. ´ë·®ÀÇ ÅؽºÆ® Ãâ·Â¿¡´Â ÀûÇÕÇÏÁö ¾Ê°í ÁÖ·Î Àå½ÄÀÌ ÇÊ¿äÇÑ ÂªÀº ¹®ÀÚ¿­À» Ãâ·ÂÇÒ ¶§ ĵ¹ö½º¿¡ ¹®ÀÚ¸¦ ±×¸°´Ù.

ĵ¹ö½º°¡ Å°ÀÔ·ÂÀ» ¹ÞÀ» ¼ö ÀÖ°í ¹®ÀÚ¸¦ ½Ç½Ã°£À¸·Î ±×¸± ¼ö ÀÖÀ¸¹Ç·Î ÆíÁýµµ °¡´ÉÇÏ´Ù. ij·µÀ¸·Î ÇöÀç À§Ä¡¸¦ Ç¥ÇöÇÒ ¼ö ÀÖÀ¸¸ç ÀÚµ¿ °³Ç൵ ±¸ÇöÇÒ ¼ö ÀÖ´Ù. ÆûÀ» ÅëÇÑ ¹®ÀÚ¿­ ÀÔ·Â ¼öÁØÀÌ ¾Æ´Ï¶ó ¼­½ÄÀ» Ç¥ÇöÇÒ ¼ö ÀÖÀ¸¹Ç·Î À¥¿¡¼­ ¹Ù·Î µ¿ÀÛÇÏ´Â ¿öµåÇÁ·Î¼¼¼­¸¦ ¸¸µé ¼ö ÀÖ´Ù´Â ¶æÀÌ´Ù.

±×·¯³ª ĵ¹ö½ºÀÇ ÅؽºÆ® °ü·Ã ±â´ÉÀº ¿öµåÇÁ·Î¼¼¼­¾¿À̳ª ¸¸µé±â¿¡´Â ºÎÁ·ÇÑ Á¡ÀÌ ¸¹´Ù. ¸Þ¼­µå 3°³, ¼Ó¼º 3°³ Á¤µµ¿¡ ºÒ°úÇÏ´Ù. ÃÖ¼ÒÇÑÀÇ ±â´É¸¸ Á¦°øÇϹǷΠ³ª¸ÓÁö´Â ÀÀ¿ëÇؼ­ ±¸ÇöÇØ¾ß ÇÑ´Ù. ±âº»ÀûÀÎ Ãâ·Â ¹æ¹ýºÎÅÍ ¾Ë¾Æ º¸ÀÚ. ´ÙÀ½ µÎ ¸Þ¼­µå·Î ÅؽºÆ®¸¦ Ãâ·ÂÇÑ´Ù.

 

fillText(text, x, y [,maxwidth])

strokeText(text, x, y [,maxwidth])

 

fillText´Â ÅؽºÆ®ÀÇ È¹À» °¡µæ ä¿ö ±×¸®°í strokeText´Â ¹Ù±ùÂÊÀÇ È¹¸¸ ±×¸°´Ù. ±×¸®´Â ºÎºÐ¸¸ ´Ù¸¦ »ÓÀÌ¸ç µÎ ¸Þ¼­µåÀÇ Àμö ±¸Á¶´Â °°´Ù. text´Â Ãâ·ÂÇÒ ¹®ÀÚ¿­À̸ç x, y´Â Ãâ·ÂÇÒ ÁÂÇ¥ÀÌ´Ù. maxwidth´Â ¹®ÀÚ¿­ÀÇ Ãâ·ÂÆøÀÌ¸ç º¸Åë »ý·«ÇÑ´Ù. µÎ ¸Þ¼­µå·Î °°Àº ¹®ÀÚ¿­À» Ãâ·ÂÇØ º¸ÀÚ.

 

filltext.html

function draw() {

     ctx.font="bold 50px ±Ã¼­";

     ctx.fillText("´ëÇѹα¹", 10, 60);

     ctx.strokeText("´ëÇѹα¹", 10, 120);

}

 

µðÆúÆ® ±Û²ÃÀÌ ³Ê¹« ÀÛ¾Æ ±ÛÀÚ¸¦ Æǵ¶ÇÒ ¼ö ¾ø´Â ¼öÁØÀ̹ǷΠfont ¼Ó¼º¿¡ Å­Áö¸·ÇÑ 50Çȼ¿ÀÇ ±Ã¼­ ÆùÆ®¸¦ ÁöÁ¤Çß´Ù.

fillText´Â ȹÀ» ä¿ö¼­ ±×¸®°í strokeText´Â ȹ¸¸ ±×¸°´Ù. º¸ÅëÀº ȹÀ» ä¿ö¼­ ±×¸®´Â °ÍÀÌ ÀϹÝÀûÀ̹ǷΠfillText¸¦ ´õ ¸¹ÀÌ »ç¿ëÇÑ´Ù. ¹°·Ð µÎ ¸Þ¼­µå¸¦ ¼ø¼­´ë·Î È£ÃâÇÏ¿© ä¿ì±âµµ ÇÏ°í ´Ù¸¥ »öÀ¸·Î ¿Ü°û¼±À» ±×¸± ¼öµµ ÀÖ´Ù.

µÎ ¸Þ¼­µåÀÇ ¸¶Áö¸· ÀμöÀÎ maxwidth´Â ¹®ÀÚ¿­À» Ãâ·ÂÇÒ ÃÖ´ëÆøÀ» ÁöÁ¤ÇÑ´Ù. ÃÖ´ëÆøÀ» ÁöÁ¤Çϸé ÀÌ Æø ³»¿¡¼­¸¸ ¹®ÀÚ¿­À» Ãâ·ÂÇÑ´Ù. ¹®ÀÚ¿­ÀÇ ½ÇÁ¦Æøº¸´Ù ´õ Á¼Àº ¿µ¿ªÀ» ÁöÁ¤Çϸé ÆùÆ®¸¦ ÁÙÀ̰ųª ÀåÆòÀ» ÁÙ¿©¼­¶óµµ ÃÖ´ëÆø¾È¿¡ ¸ÂÃç ³Ö´Â´Ù.

 

filltext2.html

function draw() {

     ctx.font="bold 50px ±Ã¼­";

     ctx.fillText("´ëÇѹα¹", 10, 60, 100);

     ctx.fillText("´ëÇѹα¹", 10, 120, 400);

}

 

ÃÖ´ëÆøÀ» 100°ú 400À¸·Î ÁöÁ¤Çß´Ù.

ÃÖ´ëÆøÀ» Á¦ÇÑÇϸé ÀÌ Æø¿¡ ¸ÂÃß±â À§ÇØ ¹®ÀÚÀÇ ÆøÀ» ´ëÆø ÁÙÀδÙ. À§ ¿¹Á¦ÀÇ °æ¿ì 4±ÛÀÚ¸¦ 100Çȼ¿¿¡ ±¸°Ü ³Ö¾î¾ß ÇϹǷΠÇÑ ±ÛÀÚ´ç 25Çȼ¿ÀÇ ÆøÀ¸·Î Ãâ·ÂÇÒ °ÍÀÌ´Ù. ±×·¯³ª ¹®ÀÚ¿­ÀÇ ½ÇÁ¦Æøº¸´Ù ´õ ³ÐÀº °æ¿ì´Â ±»ÀÌ ÆùÆ®¸¦ È®´ëÇÏÁö´Â ¾Ê´Â´Ù. ÃÖ´ëÆøÀº ³ÑÁö ¸»¾Æ¾ß ÇÒ ÆøÀÇ »óÇÑÀ» ÁöÁ¤ÇÒ »ÓÀÌÁö ²À ÀÌ Æø¿¡ ¸ÂÃ߶ó´Â ¶æÀº ¾Æ´Ï´Ù.