2-2-2.ÆùÆ® ¼Ó¼º

ÅؽºÆ®´Â ÆùÆ®·Î ±×¸®¸ç ÆùÆ®ÀÇ ¼Ó¼ºÀº ÄÁÅؽºÆ®ÀÇ font ½ºÅ¸ÀÏ·Î ÁöÁ¤ÇÑ´Ù. CSSÀÇ font ½ºÅ¸ÀÏ°ú °°Àº Çü½ÄÀ¸·Î ¸ð¾ç, ±½±â, Å©±â, ÆùÆ® ¼Ó¼ºÀ» °ø¹éÀ¸·Î ±¸ºÐÇÏ¿© ³ª¿­ÇÑ´Ù. ¼Ó¼ºÀÇ Á¾·ù´Â CSS¿Í °ÅÀÇ µ¿ÀÏÇϸç ÀÏ¹Ý ±Û²Ã, À¥ ÆùÆ® µîµµ »ç¿ëÇÒ ¼ö ÀÖ´Ù. ±×·¯³ª initial, inherite °°ÀÌ ´Ù¸¥ ¿¤¸®¸ÕÆ®¿Í ¿¬°üµÈ ¼Ó¼ºÀº »ç¿ëÇÒ ¼ö ¾øÀ¸¸ç Àý´ë ¼Ó¼º¸¸ »ç¿ëÇÒ ¼ö ÀÖ´Ù.

µðÆúÆ® ÆùÆ®´Â 10px sans-serif ¿©¼­ ³Ê¹« ÀÛÀ¸¹Ç·Î Àû´çÈ÷ Å°¿ö¼­ Ãâ·ÂÇÏ´Â °ÍÀÌ ÁÁ´Ù. ÆùÆ®¸¦ ¹Ù²ÙÁö ¾ÊÀ¸¸é ±ÛÀÚ¸¦ ÀÐÀ» ¼ö ¾øÀ» Á¤µµ·Î ÀÛ´Ù. ¾Õ ¿¹Á¦¿¡¼­´Â ´ÙÀ½ ÆùÆ®¸¦ »ç¿ëÇß´Ù.

 

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

 

¼ø¼­¸¦ Àß ÁöÄÑ¾ß ÇÑ´Ù. "±Ã¼­ 50px bold" ½ÄÀ¸·Î ¼ø¼­¸¦ ¾û¸ÁÀ¸·Î Çϸé Á¦´ë·Î Àû¿ëµÇÁö ¾Ê´Â´Ù. Å©±â´Â Çȼ¿ ¿Ü¿¡µµ Æ÷ÀÎÆ®³ª ÀÎÄ¡°°Àº ³í¸® ´ÜÀ§¸¦ »ç¿ëÇÒ ¼öµµ ÀÖ´Ù. º¸Åë ¸ð¾çÀÇ º¸Åë ±½±âÀ̸é italic, bold´Â »ý·«ÇÒ ¼ö ÀÖÀ¸¸ç µÎ °¡Áö ¸ð¾çÀ» ´Ù ÁöÁ¤ÇÒ ¼öµµ ÀÖ´Ù.

 

ctx.font="30pt ¹ÙÅÁ";

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

 

»ö»óÀº µµÇüÀÇ °æ¿ì¿Í ¸¶Âù°¡Áö·Î fillStyle, strokeStyle ¼Ó¼ºÀ¸·Î ÁöÁ¤ÇÑ´Ù. ´Ü»ö»Ó¸¸ ¾Æ´Ï¶ó ±×¶óµð¾ðÆ® ¹«´Ì³ª ÆÐÅÏÀ» ÁöÁ¤ÇÒ ¼öµµ ÀÖ´Ù. lineWidth ¼Ó¼ºÀº ȹÀÇ ±½±â¸¦ ÁöÁ¤ÇÑ´Ù. ¹®ÀÚ¿­ ¾Æ·¡ÂÊ¿¡ ±×¸²ÀÚ¸¦ ¹èÄ¡ÇÏ¿© ¸Úµå·¯Áø ¸ð¾çÀ¸·Î Àå½Äµµ °¡´ÉÇÏ´Ù.

 

fillstyle.html

function draw() {

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

 

     ctx.fillStyle = "orange";

     ctx.fillText("ÆùÆ®Fo38", 10,120);

 

     ctx.lineWidth = 3;

     ctx.strokeStyle = "red";

     ctx.strokeText("ÆùÆ®Fo38", 10,120);

}

 

¿À·»Áö »öÀ¸·Î ÆùÆ®ÀÇ ¾ÈÂÊÀ» ä¿ì°í 3Çȼ¿ µÎ²²ÀÇ »¡°£»öÀÇ ¿Ü°û¼±À» µÑ·¶´Ù. »ö»ó¸¸ Àß Á¶ÇÕÇϸé ÀÔüÀûÀÎ È¿°ú³ª ³×¿Â »çÀÎ È¿°ú¸¦ ³¾ ¼ö ÀÖ´Ù. ¿©±â¿¡ ±×¸²ÀÚ±îÁö ±ò¸é ´õ »ö´Ù¸¥ ´À³¦ÀÌ ³­´Ù.

 

fillstyle2.html

function draw() {

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

 

     ctx.shadowColor = "gray";

     ctx.shadowOffsetX = 6;

     ctx.shadowOffsetY = 6;

     ctx.shadowBlur = 12;

    

     ctx.fillStyle = "orange";

     ctx.fillText("ÆùÆ®Fo38", 10,120);

 

     ctx.shadowOffsetX = 0;

     ctx.shadowOffsetY = 0;

     ctx.shadowBlur = 0;

 

     ctx.lineWidth = 3;

     ctx.strokeStyle = "red";

     ctx.strokeText("ÆùÆ®Fo38", 10,120);

}

 

ȸ»öÀÇ ±×¸²ÀÚ¸¦ 6Çȼ¿ ¿À¸¥ÂÊ ¾Æ·¡¿¡ ±×¸®µÇ 12Çȼ¿¸¸Å­ È帴ÇÏ°Ô ÆÛÁöµµ·Ï Çß´Ù. ÀÌ »óÅ·ΠȹÀÇ ³»ºÎ¸¦ ä¿ì¸é ȸ»ö ±×¸²ÀÚÀ§¿¡ ¿À·»Áö»öÀÇ ±ÛÀÚ°¡ ºØ ¶°ÀÖ´Â ¸ð¾çÀÌ µÈ´Ù. ȹÀ» ±×¸± ¶§´Â ȹÀÇ ¾ÈÂÊÀ» À¯ÁöÇϱâ À§ÇØ ±×¸²ÀÚ¸¦ Á¦°ÅÇß´Ù. µÎ ¿¹Á¦ÀÇ ½ÇÇà °á°ú´Â ´ÙÀ½°ú °°´Ù.

±×¸²ÀÚ°¡ ÀÖ°í ¾ø°í¿¡ µû¶ó ÆùÆ®ÀÇ ºÐÀ§±â°¡ ´Þ¶óÁø´Ù. ¾à°£ ´õ ÀÀ¿ëÇÏ¿© ȹ°ú ±×¸²ÀÚ¸¸, ¿Ü°û¼±°ú ±×¸²ÀÚ¸¸ Á¶ÇÕÇÏ¿© »ö´Ù¸¦ È¿°ú¸¦ ³¾ ¼ö ÀÖ°í ±×¸²ÀÚÀÇ ¹æÇâÀ¸·Î ÆÛÁü Á¤µµ¸¦ ´Ù¾çÇÏ°Ô Á¶Á¤ÇÏ¿© »ö´Ù¸¥ È¿°ú¸¦ ±¸ÇöÇÒ ¼ö ÀÖ´Ù. ¾ÈÂÊÀÇ Ã¤¿ò»ö¿¡ ±×·¡µð¾ðÆ®³ª ÆÐÅÏÀ» »ç¿ëÇÏ¸é ´õ ³¯Æ¢³ª´Â ¹®ÀÚ¸¦ ±×¸± ¼ö ÀÖ´Ù. ´ÙÀ½ ¿¹Á¦´Â ¹«Áö°³»öÀ¸·Î ÆùÆ® ¾ÈÂÊÀ» ±×¸°´Ù.

 

gradienttext.html

function draw() {

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

 

     var brush = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);

     brush.addColorStop(0, "red");

     brush.addColorStop(0.3, "yellow");

     brush.addColorStop(0.5, "green");

     brush.addColorStop(0.7, "blue");

     brush.addColorStop(1, "violet");

     ctx.fillStyle = brush;

    

     ctx.fillText("ÆùÆ®Fo38", 10,120);

 

     ctx.lineWidth = 2;

     ctx.strokeText("ÆùÆ®Fo38", 10,120);

}

 

ĵ¹ö½º¸¦ °¡µæ ä¿ì´Â Á÷¼± ±×·¡µð¾ðÆ®¸¦ ä¿ò ¹«´Ì·Î ÁöÁ¤Çß´Ù. ¿Ü°û¼±Àº 2Çȼ¿ÀÇ °ËÀº»öÀ¸·Î ±×·È´Âµ¥ ¾Æ¿¹ ¿Ü°û¼±À» »© ¹ö¸®´Â °Íµµ º¼¸¸ÇÏ´Ù.

ÆùÆ®¿Í Á÷Á¢ÀûÀ¸·Î °ü·ÃµÈ ÀÌ·± ¼Ó¼ºµé ¿Ü¿¡µµ Àá½Ã ÈÄ ¹è¿ï º¯È¯À» Àû¿ëÇϸé ȸÀüÀ̳ª ±â¿ï¾îÁø ¹®ÀÚµµ µðÀÚÀÎÇÒ ¼ö ÀÖ´Ù. ÀÀ¿ëÇϱ⠳ª¸§ÀÌ´Ù.