ÅؽºÆ®´Â À¥ ÆäÀÌÁö¸¦ ±¸¼ºÇÏ´Â ±âº» ³»¿ëÀÌ´Ù. º¸Åë 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Çȼ¿ÀÇ ÆøÀ¸·Î Ãâ·ÂÇÒ °ÍÀÌ´Ù. ±×·¯³ª ¹®ÀÚ¿ÀÇ
½ÇÁ¦Æøº¸´Ù ´õ ³ÐÀº °æ¿ì´Â ±»ÀÌ ÆùÆ®¸¦ È®´ëÇÏÁö´Â ¾Ê´Â´Ù. ÃÖ´ëÆøÀº ³ÑÁö ¸»¾Æ¾ß ÇÒ ÆøÀÇ »óÇÑÀ» ÁöÁ¤ÇÒ
»ÓÀÌÁö ²À ÀÌ Æø¿¡ ¸ÂÃ߶ó´Â ¶æÀº ¾Æ´Ï´Ù.