ÅؽºÆ®´Â ÆùÆ®·Î ±×¸®¸ç ÆùÆ®ÀÇ ¼Ó¼ºÀº ÄÁÅؽºÆ®ÀÇ 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Çȼ¿ÀÇ °ËÀº»öÀ¸·Î ±×·È´Âµ¥ ¾Æ¿¹ ¿Ü°û¼±À» »© ¹ö¸®´Â °Íµµ º¼¸¸ÇÏ´Ù.
ÆùÆ®¿Í Á÷Á¢ÀûÀ¸·Î °ü·ÃµÈ ÀÌ·± ¼Ó¼ºµé ¿Ü¿¡µµ Àá½Ã ÈÄ ¹è¿ï º¯È¯À» Àû¿ëÇϸé ȸÀüÀ̳ª ±â¿ï¾îÁø ¹®ÀÚµµ µðÀÚÀÎÇÒ
¼ö ÀÖ´Ù. ÀÀ¿ëÇϱ⠳ª¸§ÀÌ´Ù.