HTML5 - Drawing
ÃÑ ÆäÀÌÁö ¼ö : 3224

Àüü ÇÔ¼ö/¿ë¾î»çÀü
Facebook Joinc ±×·ì   Joinc QA »çÀÌÆ®



joinc´Â Firefox¿Í chrome¿¡¼­ Å×½ºÆ® Çß½À´Ï´Ù. IE¿¡¼­´Â Å×À̺íÀÌ ±úÁö°Å³ª À̹ÌÁö°¡ º¸ÀÌÁö ¾ÊÀ» ¼ö ÀÖ½À´Ï´Ù. ƯÈ÷ ±¸±Û DocsÀ̹ÌÁöÀÇ °æ¿ì ¿¢¹Úó¸®µÉ ¼ö ÀÖ½À´Ï´Ù.

canvas

HTML5´Â <canvas> ¾Ù¸®¸ÕÆ®°¡ Á¤ÀǵǾî ÀÖ´Ù. canvas¸¦ ÀÌ¿ëÇØ¼­ ±×·¡ÇÈ ·£´õ¸µ, °ÔÀÓ ±×·¡ÇÈ ±âŸ ºñÁê¾ó È¿°ú¸¦ ¸¸µé ¼ö ÀÖ´Ù.

ĵ¹ö½º´Â ´ÙÀ½°ú °°ÀÌ ¸¸µç´Ù.
<canvas width="300" height="225" style="border:1px dotted;float:left"></canvas> 
 


ĵ¹ö½º´Â ºó »óÅ·Π½ÃÀ۵ȴÙ. ¹«¾ð°¡¸¦ ±×·Á ³Ö¾î º¸ÀÚ.

¿©±â¸¦ Ŭ¸¯Çϸé..
ĵ¹ö½º¿¡ »ç°¢ÇüÀ» ±×¸®±â À§Çؼ­ ´ÙÀ½°ú °°Àº ½ºÅ©¸³Æ®¸¦ ¸¸µé¾ú´Ù.

<script> 
function draw_b () { 
  var b_canvas = document.getElementById ("b"); 
  var b_context = b_canvas.getContext ("2d"); 
  b_context.fillRect (50, 25, 150, 100); 
} 
</script> 
 
getElementByid·Î DOM ¾È¿¡¼­ canvas¸¦ ã¾Æ³½´Ù. ±× ÈÄ getContext ¸Þ¼­µå¸¦ È£ÃâÇØ¼­ ĵ¹ö½º¸¦ Á¦¾îÇϱâ À§ÇÑ ¹®¸ÆÀ» ¾ò¾î³½´Ù.

»ç°¢ÇüÀº fillRect ¸Þ¼­µå·Î ¸¸µç´Ù.

canvas ÁÂÇ¥°è

EmailÀ» ±âÀÔÇϸé, ´ñ±ÛÀÌ ¸ÞÀÏ·Î Àü´ÞµË´Ï´Ù.