HTML5 ±âÃÊ °Á - Canvas API
http://www.imaso.co.kr/?doc=bbs/gnuboard.php&bo_table=article&wr_id=38937 ¾ó¸¶ Àü ¾îµµºñ´Â 750¿©¸íÀÇ ÀοøÀ» °¨¿øÇÏ°í ¸ð¹ÙÀÏ À¥¿ë Ç÷¡½Ã °³¹ßÀ» Áß´ÜÇß´Ù. ÀÌ´Â ¸ð¹ÙÀÏ À¥¿¡¼ Ç÷¡½Ã°¡ HTML5¿¡ ºñÇØ °æÀï·ÂÀÌ ³·´Ù´Â ÆÇ´Ü¿¡ µû¸¥ °ÍÀ¸·Î ÇâÈÄ ¾îµµºñ´Â HTML5¿¡ ÁýÁßÇÒ °èȹÀÌ´Ù. ÇÑÃþ ź·ÂÀ» ¹Þ°Ô µÈ HTML5ÀÇ ´Ù¾çÇÑ API Áß ±âÁ¸ Ç÷¡½ÃÀÇ µ¿ÀûÀÎ ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú¸¦ ´ëüÇÒ ¼ö ÀÖ´Â °ÍÀÌ ¹Ù·Î ĵ¹ö½º(Canvas) APIÀÌ´Ù. ÀÌ ±Û¿¡¼´Â ĵ¹ö½º API¿¡ ´ëÇØ »ìÆ캸°í HTML5°¡ ¾î¶»°Ô Ç÷¡½Ã¸¦ ´ëüÇÒ ¼ö ÀÖ°Ô µÆ´ÂÁö È®ÀÎÇϵµ·Ï ÇÏÀÚ.
ÇѶ§ Ç÷¡½Ã´Â À¥»çÀÌÆ®¿¡ Çõ½ÅÀûÀÎ ¿ªÇÒÀ» Çϸç ÀÌÀü±îÁö º¼ ¼ö ¾ø´ø ´ÙÀ̳»¹ÍÇÑ ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú·Î Å« Àα⸦ ´©·È´Ù. ÀÌ·¸°Ô ÇÑ ½Ã´ë¸¦ dz¹ÌÇß´ø ±×·¡ÇÈ ÅøÀÎ Ç÷¡½Ã´Â HTML5ÀÇ µîÀå°ú ÇÔ²² ¼¼È÷ ¼³ ÀÚ¸®¸¦ ÀҾ°í ÀÖ´Ù.
ĵ¹ö½º APIÀÇ ÇöÀç HTML5 ĵ¹ö½º API¸¦ È°¿ëÇÏ¸é ±âÁ¸ÀÇ Ç÷¡½Ã°¡ °®°í ÀÖ´ø °Á¡ÀÎ È·ÁÇÑ ¾Ö´Ï¸ÞÀ̼ǰú ÀÎÅÍ·¢Æ¼ºêÇÑ È¿°ú¸¦ ³¾ ¼ö ÀÖ´Ù. ĵ¹ö½º API´Â ¸ð¹ÙÀÏ ºê¶ó¿ìÀú¸¦ Æ÷ÇÔÇÑ ÃֽŠºê¶ó¿ìÀú¿¡¼ ¸ðµÎ Áö¿øÇÏ°í ÀÖÁö¸¸, ±¹³» Á¡À¯À²ÀÌ ³ôÀº IE8(Internet Explorer 8) ÀÌÇÏ¿¡¼´Â Áö¿øÇÏÁö ¾Ê¾Æ ¾ÆÁ÷ ±¹³» À¥¿¡¼´Â È°¼ºÈµÇÁø ¾Ê¾Ò´Ù. ÇÏÁö¸¸ Ãֱ٠ĵ¹ö½º API¸¦ Áö¿øÇÏ´Â Å©·ÒÀ̳ª ÆÄÀ̾îÆø½º¿Í °°Àº ºê¶ó¿ìÀúÀÇ Á¡À¯À²ÀÌ Á¡Á¡ ³ô¾ÆÁö°í ÀÖ´Â ¹Ý¸é, ĵ¹ö½º API¸¦ Áö¿øÇÏÁö ¾Ê´Â ±¸ ¹öÀü IEÀÇ Á¡À¯À²Àº ³·¾ÆÁö°í ÀÖ´Â Ãß¼¼ÀÌ´Ù. ÀÌ·± Ãß¼¼°¡ °è¼Ó µÈ´Ù¸é °ð ±¹³» À¥¿¡¼µµ ĵ¹ö½º API¸¦ È°¿ëÇÑ È·ÁÇÑ À¥»çÀÌÆ®µéÀÌ ¸¹ÀÌ µîÀåÇÒ °ÍÀÌ´Ù.
ÇöÀç ÇØ¿Ü¿¡¼´Â ĵ¹ö½º API¸¦ ÀÌ¿ëÇÑ »çÀÌÆ®µéÀÌ ¸¹ÀÌ È°¼ºÈµÅ ÀÖÀ¸¸ç, °ü·ÃµÈ ÀÚ¹Ù½ºÅ©¸³Æ® ¶óÀ̺귯¸®µéµµ È°¹ßÈ÷ °³¹ßµÇ°í ÀÖ´Ù. ƯÈ÷ °ÔÀÓ ºÐ¾ß¿¡¼ ĵ¹ö½º API°¡ ÁÖ¸ñ¹ÞÀ¸¸ç Ãֱ٠ĵ¹ö½º À§¿¡ 3D ¾Ö´Ï¸ÞÀ̼ÇÀ» ³ÖÀ» ¼ö ÀÖ´Â ±â¼úÀÎ WebGLÀ» È°¿ëÇÑ °ÔÀÓµéÀÌ ±Þ°ÝÈ÷ Áõ°¡ÇÏ°í ÀÖ´Ù.
<ȸé 1> ĵ¹ö½º API·Î ±¸ÇöµÈ eºÏ
WebGL WebGLÀº Web-based Graphics LibraryÀÇ ÁÙÀÓ¸»·Î ĵ¹ö½º API·Î 3D ¾Ö´Ï¸ÞÀ̼ÇÀ» ±¸ÇöÇÒ ¼ö ÀÖ´Â ¶óÀ̺귯¸®´Ù. WebGLÀº ¾ÆÁ÷ °³¹ß ÁßÀΠǥÁØÀ̶ó ¿Ïº®È÷ Áö¿øÇÏ´Â ºê¶ó¿ìÀú´Â ¾ø´Ù. IE¸¦ Á¦¿ÜÇÑ Å©·Ò, ÆÄÀ̾îÆø½º, »çÆĸ®, ¿ÀÆä¶ó¿¡¼ WebGLÀ» ÀϺΠÁö¿øÇϸç WebGLÀ» ÀÌ¿ëÇÑ ´Ù¾çÇÑ À¥ ¾ÖÇø®ÄÉÀ̼ǵéÀÌ °³¹ßµÇ°í ÀÖ´Ù. ´ëÇ¥ÀûÀÎ ¿¹·Î »ç¶÷ÀÇ ¸öÀ» ÇغÎÇÐÀûÀ¸·Î °üÂûÇÒ ¼ö ÀÖ´Â À¥ ¾ÖÇø®ÄÉÀ̼ÇÀÎ ±¸±Û ¹Ùµð°¡ ÀÖ´Ù.
<ȸé 2> »ç¶÷ÀÇ ¸öÀ» 3D·Î ÇغÎÇØ º¼ ¼ö ÀÕ´Â ±¸±Û ¹Ùµð
´Ù¾çÇÑ WebGL ÀÛÇ°µéÀ» º¸·Á¸é Mr.doob À¥»çÀÌÆ®¿¡ ¹æ¹®ÇØ º¸´Â °ÍÀÌ ÁÁ´Ù. Mr.doobÀº Ç÷¡½Ã¸¦ È°¿ëÇÑ Ã¢ÀÇÀûÀÌ°í ¸ÚÁø ÀÛÇ°µéÀ» À¥»çÀÌÆ®¿¡ ¿Ã·ÈÀ¸³ª, ºê¶ó¿ìÀú¿¡¼ HTML5¿¡ ´ëÇÑ Áö¿øÀÌ °ÈµÇ¸ç ÃÖ±Ù HTML5 ±â¼úÀ» ÀÌ¿ëÇÑ ÀÛÇ°µéÀ» ¿Ã¸®±â ½ÃÀÛÇß´Ù.
<ȸé 3> 3D ºí·ÏÀ» ½×À» ¼ö ÀÖ´Â Mr.doobÀÇ WebGL ÀÛÇ°
ÀÌ ¿Ü¿¡µµ Chrome WebGL Experiments¿¡¼ ¸¹Àº WebGL ÀÛÇ°À» °¨»óÇÒ ¼ö ÀÖ´Ù. ÀÌ »çÀÌÆ®´Â Chrome Experiments »çÀÌÆ®¿¡ ¿Ã¶ó¿Â ÀÛÇ°µé Áß WebGL ±â¹ÝÀÇ ÀÛÇ°µéÀ» ¸ð¾Æ ³õÀº °÷ÀÌ´Ù. ÀÌ »çÀÌÆ®¸¦ ¹æ¹®ÇÏ¸é ¼¼°è °¢±¹ÀÇ °³¹ßÀÚµéÀÌ ¿Ã¸° ´Ù¾çÇÑ ÀÛÇ°µéÀ» °¨»óÇÒ ¼ö ÀÖ´Ù.
ĵ¹ö½º API´Â ¾îµð¿¡ È°¿ëÇÒ ¼ö ÀÖÀ»±î? ¾Õ¼ ĵ¹ö½º API°¡ °ÔÀÓ °³¹ß¿¡ È°¿ëµÈ´Ù°í ¼Ò°³Çß´Ù. °ÔÀÓ ¿Ü¿¡ ¾î¶² ºÐ¾ß¿¡¼ ĵ¹ö½º API°¡ È°¿ëµÉ ¼ö ÀÖÀ»±î? ´Ü¼øÈ÷ ½Ã¼±À» ²ø ¼ö ÀÖ´Â Çö¶õÇÑ È¿°ú°¡ ¸ñÀûÀ̶ó¸é ¹«¾ð°¡ ¾Æ½¬¿ï °ÍÀÌ´Ù.
¸ÕÀú ĵ¹ö½º API¸¦ ÀÌ¿ëÇϸé Â÷Æ®, ±×·¡ÇÁ¿¡ µ¿ÀûÀÎ ½Ã°¢ È¿°ú¸¦ ÁÙ ¼ö ÀÖ´Ù. ±âÁ¸¿¡´Â ȸ鿡 ´ë°¢¼± Çϳª¸¦ ±×¸®´Â °Íµµ Èûµé¾ú´ø °Í°ú ´Þ¸®, ĵ¹ö½º API´Â ¾î¶² ÇüÅÂ¶óµµ ±×¸± ¼ö ÀÖ´Ù. ÁÖ·Î Ç÷¡½Ã¸¦ ÀÌ¿ëÇÏ´ø µ¿ÀûÀÎ Â÷Æ®³ª ±×·¡ÇÁ µîÀ» ÀÌÁ¦ ĵ¹ö½º API·Î Ç÷¯±×ÀÎ ¾øÀÌ ±×¸± ¼ö ÀÖ´Ù. ÇöÀç HTML5¸¦ ÀÌ¿ëÇØ Â÷Æ®¸¦ ±×¸± ¼ö ÀÖ´Â ÀÚ¹Ù½ºÅ©¸³Æ® ¶óÀ̺귯¸®¿¡´Â RGraph¿Í AwesomeChartJS µîÀÌ ÀÖ´Ù.
<ȸé 4> AwesomeChartJS¸¦ ÀÌ¿ëÇØ ¸¸µç ±×·¡ÇÁµé
¶ÇÇÑ Äµ¹ö½º API´Â ¹è³Ê ±¤°í¿¡µµ »ç¿ëµÉ ¼ö ÀÖ´Ù. ÀÌ ¶ÇÇÑ ±âÁ¸¿¡ Ç÷¡½Ã°¡ »ç¿ëµÆÁö¸¸, ºê¶ó¿ìÀú¿¡¼ ĵ¹ö½º API¿¡ ´ëÇÑ Áö¿øÀÌ ´Ã¾î³ª¸é ĵ¹ö½º API·Î Á¦ÀÛµÈ ±¤°íµéÀÌ È°¼ºÈµÉ °ÍÀÌ´Ù. ĵ¹ö½º API¸¦ È°¿ëÇϸé Æ÷Åä¼¥°ú °°Àº ±×·¡ÇÈ ÅøÀ» À¥¿¡¼ Á¦°øÇÏ´Â °Íµµ °¡´ÉÇØÁø´Ù. ¾ÆÁ÷ Æ÷Åä¼¥À̳ª ÀÏ·¯½ºÆ®·¹ÀÌÅÍ µîÀÇ µ¥½ºÅ©Å¾¿ë ¾ÖÇø®ÄÉÀÌ¼Ç ¸¸ÅÀÇ ±â´ÉÀ» °®ÃßÁø ¸øÇßÁö¸¸ ²Ï ´Ù¾çÇÑ ±â´ÉÀ» Áö¿øÇÏ´Â ±×·¡ÇÈ ÅøÀÌ ÀÌ¹Ì °³¹ßµÅ ÀÖ´Ù.
<ȸé 5> ĵ¹ö½º API·Î Á¦ÀÛµÈ ±×·¡ÇÈ ÅøÀÎ SketchPad
ÀÌ ¹Û¿¡µµ ¿¡¹Ä·¹ÀÌÅÍ, ½Ã¹Ä·¹ÀÌÅÍ µîÀ» °³¹ßÇÏ´Â µ¥ È°¿ëµÉ ¼ö ÀÖÀ¸¸ç, À¥¿¡¼ ±¸µ¿ÇÒ ¼ö ÀÖ´Â ¿ø°ÝÁ¦¾î ¾ÖÇø®ÄÉÀ̼ÇÀ» ¸¸µå´Â µ¥¿¡µµ ÀÌ¿ëÇÒ ¼ö ÀÖ´Ù. ĵ¹ö½º API´Â ´Ù¾çÇÑ ºÐ¾ß¿¡ ÀÀ¿ë °¡´ÉÇØ Äµ¹ö½º API°¡ ¹ßÀüÇÒ ¼ö·Ï È°¿ëµµ´Â ¹«±Ã¹«ÁøÇØ Áö°í ÀÖ´Ù.
ĵ¹ö½º API »ç¿ëÇϱâ ÀÌÁ¦ ĵ¹ö½º API¸¦ ÀÌ¿ëÇÏ¿© ĵ¹ö½º À§¿¡ ¼±À» ±ß°í ¿øÀ» ±×·Áº¸ÀÚ.
ÁÂÇ¥°è
ĵ¹ö½º API¸¦ »ç¿ëÇϱâ Àü¿¡ ĵ¹ö½ºÀÇ ÁÂÇ¥°è¿¡ ´ëÇØ »ìÆ캸ÀÚ.
<±×¸² 1> HTML5 ĵ¹ö½ºÀÇ ÁÂÇ¥°è
<±×¸² 1> ĵ¹ö½º·Î Á¡(0, 0)ÀÇ À§Ä¡´Â ÁÂÃø »ó´ÜÀ̸ç, ¿ìÃøÀ¸·Î °¥¼ö·Ï x°ªÀÌ Áõ°¡ÇÏ°í ¾Æ·¡·Î °¥¼ö·Ï y°ªÀÌ Áõ°¡ÇÑ´Ù. ÀϹÝÀûÀ¸·Î ¾Æ·¡·Î °¥¼ö·Ï ÁÂÇ¥ °ªÀÌ °¨¼ÒÇÏ´Â µ¥Ä«¸£Æ® ÁÂÇ¥°è¿¡ Àͼ÷ÇÏ°ÚÁö¸¸ ĵ¹ö½º API¿¡¼´Â Áõ°¡ ¹æÇâÀÌ ¹Ý´ëÀÓ¿¡ ÁÖÀÇÇØ¾ß ÇÑ´Ù.
¼± ±×¸®±â
±×¸²À» ±×¸®´Â µ¥¿¡ °¡Àå ±âº»ÀÎ ¼± ±×¸®±â¸¦ ¿ì¼± »ìÆ캸ÀÚ. ĵ¹ö½º API¿¡ ¹«¾ð°¡¸¦ ±×¸®·Á°í ÇÑ´Ù¸é ¸ÕÀú ±×¸²À» ±×¸± °ø°£À» ³ªÅ¸³»´Â <canvas> ¿¤¸®¸ÕÆ®°¡ ÇÊ¿äÇÏ´Ù.
<canvas width=¡±500¡± height=¡±400¡± id=¡±myCanvas¡± style=¡±border:1px solid¡±> < /canvas>
À§ ÄÚµå·Î ³Êºñ 500px, ³ôÀÌ 400pxÀΠĵ¹ö½º°¡ »ý¼ºµÇ¸ç, ĵ¹ö½º ¿µ¿ªÀ» ½±°Ô È®ÀÎÇÒ ¼ö ÀÖµµ·Ï 1pxÀÇ °æ°è¸¦ Ãß°¡Çß´Ù.
ĵ¹ö½º ¾È¿¡ ¼±À» ±×¸®´Â ÀÚ¹Ù½ºÅ©¸³Æ® Äڵ带 ´Ü°èº°·Î »ìÆ캸ÀÚ. ¸ÕÀú <canvas> ¿¤¸®¸ÕÆ®¿¡ Á¢±ÙÇØ Äµ¹ö½º °´Ã¼¸¦ »ý¼ºÇÏ°í ±×¸²À» ±×¸®´Â µ¥ ÇÊ¿äÇÑ API¸¦ Á¦°øÇÏ´Â context °´Ã¼¸¦ »ý¼ºÇØ¾ß ÇÑ´Ù. <¸®½ºÆ® 1>¿¡¼ context °´Ã¼¸¦ »ý¼ºÇÏ´Â ¿¹Á¦ÀÌ´Ù.
<¸®½ºÆ® 1> context °´Ã¼ »ý¼º // ¸ÕÀú <canvas> ¿¤¸®¸ÕÆ®ÀÇ id¸¦ ÀÌ¿ëÇØ Äµ¹ö½º DOM °´Ã¼ »ý¼º var canvas = document.getElementById('myCanvas'), // ĵ¹ö½º DOM °´Ã¼¸¦ ÀÌ¿ëÇØ context °´Ã¼ »ý¼º context = canvas.getContext('2d'); context.beginPath(); |
<¸®½ºÆ® 1>¿¡¼ getContext() ÇÔ¼öÀÇ ¸Å°³º¯¼ö·Î 2Â÷¿ø ±×¸²À» ±×¸± ¼ö ÀÖ´Â ¡®2d¡¯¸¦ »ç¿ëÇß´Ù. getContext() ÇÔ¼öÀÇ ¸Å°³º¯¼ö·Î 2d ¿Ü¿¡ ¡®webGL¡¯µµ »ç¿ëÇÒ ¼ö ÀÖÁö¸¸ ¾ÆÁ÷ À̸¦ Áö¿øÇÏ´Â ºê¶ó¿ìÀú´Â ¾ø´Ù.
¼±À» ±×¸®±â Àü¿¡´Â ¹Ýµå½Ã ¼± ±×¸®±â¸¦ ½ÃÀÛÇÑ´Ù´Â ÀǹÌÀÇ beginPath() ÇÔ¼ö¸¦ È£ÃâÇØ¾ß ÇÑ´Ù. beginPath() ÇÔ¼ö¸¦ ¸ÕÀú È£ÃâÇÏÁö ¾Ê°í ¼±À» ±×·Áµµ ĵ¹ö½º¿¡ ¼±ÀÌ ±×·ÁÁöÁö¸¸ beginPaht() ÇÔ¼ö´Â ±âÁ¸¿¡ ±×·ÁÁø °ÍÀ» ÃʱâÈÇÑ´Ù. ±×·¯¹Ç·Î ÀáÀçÀûÀÎ ¹®Á¦ ¹ß»ýÀ» ¸·±â À§ÇØ ±×¸² ±×¸®±â Àü¿¡ ¸ÕÀú ½ÇÇàÇÏ´Â °ÍÀÌ ÁÁ´Ù.
ÀÌÁ¦ ½ÇÁ¦·Î ¼±À» ±ß´Â Äڵ带 »ìÆ캸ÀÚ. Á÷¼±À» ±×¸®´Â °úÁ¤Àº »ç¶÷ÀÌ ¼ÕÀ¸·Î ¼±À» ±ß´Â °Í°ú ºñ½ÁÇÏ´Ù. <¸®½ºÆ® 2>ÀÇ ÇÔ¼öµéÀº ¸ÕÀú ¼±À» ±×À» ½ÃÀÛÁ¡À¸·Î ÆæÀ» µé¾î ¿Å±â°í ¿øÇÏ´Â °÷±îÁö ¼±À» ±ß´Â µ¿ÀÛ°ú °°´Ù.
<¸®½ºÆ® 2> Á÷¼± ±×¸®±â ¿¹Á¦ // ¼± ±ß±â¸¦ ½ÃÀÛÇÒ Á¡À» ÁöÁ¤. °¢ ÁÂÇ¥´Â »ó´ë ÁÂÇ¥°¡ ¾Æ´Ñ Àý´ë ÁÂÇ¥. context.moveTo(100, 50); // ¼± ±ß±â¸¦ ³¡³¾ ¸¶Áö¸· Á¡À» ÁöÁ¤ context.lineTo(400, 350); // stroke() ÇÔ¼ö¸¦ ÀÌ¿ëÇØ ¼±ÀÌ Äµ¹ö½º¿¡ ³ªÅ¸³ªµµ·Ï ÇÔ context.stroke(); |
<¸®½ºÆ® 2>¸¦ ºê¶ó¿ìÀú¿¡¼ ½ÇÇàÇϸé, <ȸé 6>ó·³ ĵ¹ö½º¿¡ ´ë°¢¼±ÀÌ ±×¾îÁø °ÍÀ» È®ÀÎÇÒ ¼ö ÀÖ´Ù.
<ȸé 6> ĵ¹ö½º À§¿¡ Á¡(100, 50)¿¡¼ Á¡(400, 350)±îÁö ±×¾îÁø ´ë°¢¼±
°î¼± ±×¸®±â
°î¼±Àº quadraticCurveTo() ÇÔ¼ö·Î ±×¸± ¼ö ÀÖ´Ù. quadraticÀº ¡®2Â÷¡¯¶õ ¶æÀ¸·Î, 2Â÷ º£Áö¾î °î¼±À» ±×¸± ¶§¿¡ »ç¿ëÇÏ´Â ÇÔ¼öÀÌ´Ù. ÀÌ ÇÔ¼öÀÇ ±âº» Çü½ÄÀº ´ÙÀ½°ú °°´Ù.
context.quadraticCurveTo(cpx, cpy, x, y)
quadraticCurveTo() ÇÔ¼ö¸¦ È£ÃâÇÏ¸é ½ÃÀÛÁ¡¿¡¼ Á¡(x, y)À¸·Î À̾îÁø °î¼±ÀÌ ±×·ÁÁø´Ù. Á¡(cpx, cpy)¸¦ ±âÁØÀ¸·Î °î¼±ÀÌ ±×·ÁÁö¹Ç·Î, ÇØ´ç Á¡ÀÇ À§Ä¡¸¦ º¯°æÇÏ¸é ´Ù¾çÇÑ ÇüÅÂÀÇ °î¼±À» ±×¸± ¼ö ÀÖ´Ù.
¼± ±×¸®±â ¿¹Á¦ÀÎ <¸®½ºÆ® 1>¿¡ quadraticCurveTo()¸¦ »ç¿ëÇØ °î¼±À» ±×·Áº¸ÀÚ.
<¸®½ºÆ® 3>Àº <¸®½ºÆ® 2>¿¡ »ç¿ëÇÑ lineTo() ÇÔ¼ö¸¸ quadratic CurveTo() ÇÔ¼ö·Î ±³Ã¼Çß´Ù. <¸®½ºÆ® 2>¸¦ ½ÇÇàÇϸé <ȸé 7>ó·³ ÁÂÃø ÇÏ´ÜÀ¸·Î º¼·ÏÇÑ °î¼±ÀÌ ±×·ÁÁø´Ù.
<¸®½ºÆ® 3> °î¼± ±×¸®±â ¿¹Á¦ var canvas = document.getElementById('myCanvas'), context = canvas.getContext('2d'); context.beginPath(); context.moveTo(100, 50); context.quadraticCurveTo(100, 350, 400, 350); context.stroke(); |
<±×¸² 2> 2Â÷ º£Áö¾î °î¼±
<ȸé 7> °î¼± ±×¸®±â ¿¹Á¦ÀÎ <¸®½ºÆ® 3>ÀÇ °á°ú
¿ø ±×¸®±â
¿øÀº arc() ÇÔ¼ö·Î ±×¸± ¼ö ÀÖ´Ù. arc() ÇÔ¼ö´Â ¿øÀ» ±×¸®´Â ÇÔ¼ö¶ó±âº¸´Ü Á¤È®ÇÏ°Ô´Â ¿øÈ£¸¦ ±×¸®´Â ÇÔ¼ö´Ù. ¿øÈ£»Ó¸¸ ¾Æ´Ï¶ó ¹Ý¿ø, ºÎä²Ã°ú °°Àº ±×¸²À» ±×¸± ¼ö ÀÖ´Ù. arc() ÇÔ¼öÀÇ ±âº» Çü½ÄÀº ´ÙÀ½°ú °°´Ù.
context.arc(x, y, radius, startAngle, endAngle[, anticlockwise])
¾ÕÀÇ µÎ ¸Å°³º¯¼ö x¿Í y´Â ±×·ÁÁú È£ÀÇ Áß½ÉÁ¡ÀÇ À§Ä¡À̸ç, radius´Â ¿øÈ£ÀÇ ¹ÝÁö¸§ÀÌ´Ù. startAngleÀº È£ ±×¸®±â¸¦ ½ÃÀÛÇÏ´Â °¢µµÀ̸ç, endAngleÀº È£ ±×¸®±â¸¦ Á¾·áÇÏ´Â °¢µµ·Î ¶óµð¾È °ªÀ¸·Î ³Ñ°ÜÁà¾ß ÇÑ´Ù. ¸¶Áö¸·À¸·Î anticlockwise´Â È£¸¦ ±×¸± ¹æÇâÀ» °áÁ¤ÇÏ´Â ºÒ¸®¾ð(Boolean) °ªÀÌ´Ù. ¸Å°³º¯¼ö À̸§ÀÌ anticlockwiseÀ̹ǷΠtrue¸¦ ³Ñ±â¸é ¹Ý½Ã°è ¹æÇâ, false¸¦ ³Ñ±â¸é ½Ã°è ¹æÇâÀÌ µÈ´Ù.
¶óµð¾È
¶óµð¾ÈÀº °¢µµ¸¦ Ç¥½ÃÇϴ ǥÁØ ´ÜÀ§·Î ¸¹Àº ¼öÇÐ ºÐ¾ß¿¡¼ ÀÌ¿ëµÇ°í ÀÖ´Ù. ĵ¹ö½º API¸¦ ÀÌ¿ëÇØ ±×¸²À» ±×¸± ¶§ ¶óµð¾ÈÀ» ¹Ýµå½Ã ±â¾ïÇØ¾ß ÇÑ´Ù. 1¶óµð¾ÈÀº ¿øÈ£ÀÇ ±æÀÌ°¡ ¹ÝÁö¸§ÀÇ ±æÀÌ¿Í °°¾ÆÁú ¶§ÀÇ °¢µµ¸¦ ÀǹÌÇÑ´Ù.
¶óµð¾È = °¢µµ ¡¿ ¥ð ¡À 180
À§ÀÇ ½ÄÀ» ÀÌ¿ëÇÏ¸é ¶óµð¾È °ªÀ» ½±°Ô ±¸ÇÒ ¼ö ÀÖ´Ù. ¿¹¸¦ µé¾î 90µµ´Â 1/2 ¶óµð¾È, 180µµ´Â 1¶óµð¾È, 360µµ´Â 2¶óµð¾ÈÀÌ´Ù.
±×·³ ¶óµð¾ÈÀ» ±¸ÇÒ ¼ö ÀÖ´Â arc() ÇÔ¼ö¸¦ ÀÌ¿ëÇØ ¿øÀ» ±×·Áº¸ÀÚ.
<¸®½ºÆ® 4>´Â Áß½ÉÁ¡(200, 200)À» ±âÁØÀ¸·Î ¹ÝÁö¸§Àº 100pxÀÎ ¿øÀ» ±×¸°´Ù. startAngle°ú endAngle °ªÀ» º¯°æÇÏ¸é ¿ø ´ë½Å ¿øÈ£¸¦ ±×¸± ¼ö ÀÖ´Ù.
<¸®½ºÆ® 4> ¿ø ±×¸®±â ÄÚµå var canvas = document.getElementById('myCanvas'), context = canvas.getContext('2d'); context.beginPath(); context.arc(200, 200, 100, 0, Math.PI*2, true); context.stroke(); |
<ȸé 8> ¿ø ±×¸®±â ¿¹Á¦ÀÎ <¸®½ºÆ® 4>ÀÇ °á°ú
¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú ³Ö±â ĵ¹ö½º API¿¡¼ °¡Àå ±âº»ÀÎ ¼±°ú ¿ø ±×¸®±â ¹æ¹ýÀ» »ìÆìºÃ´Ù. ÀÌ ¿Ü¿¡µµ ĵ¹ö½º API¸¦ Àß È°¿ëÇϱâ À§Çؼ ÀÍÇô¾ß ÇÏ´Â °ÍµéÀÌ ¸¹Áö¸¸, Áö¸é»ó ¸ðµÎ ´Ù·ê ¼ö ¾øÀ¸¹Ç·Î ±×¸² ±×¸®±â API¿¡ ´ëÇÑ ¼³¸íÀº ÀÌ Á¤µµ·Î ¸¶Ä£´Ù. Áö±ÝºÎÅÍ´Â ´õ Àç¹ÌÀÖ´Â ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú¸¦ ³Ö´Â ¹æ¹ýÀ» »ìÆ캸ÀÚ.
ĵ¹ö½º API¿¡¼ Á¦°øÇÏ´Â ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú¸¦ »ç¿ëÇϱâ À§Çؼ´Â ¸ÕÀú setInterval() ÇÔ¼ö¸¦ ¾Ë¾Æ¾ß ÇÑ´Ù. ´ÙÀ½Àº setInterval() ÇÔ¼öÀÇ ±âº»ÇüÀÌ´Ù.
var intervalID = window.setInterval(code, delay);
setInterval() ÇÔ¼öÀÇ Ã¹ ¹ø° ¸Å°³º¯¼ö´Â ¹Ýº¹ÀûÀ¸·Î ½ÇÇàÇÒ ÄÚµåÀ̸ç, µÎ ¹ø° ¸Å°³º¯¼ö´Â ¹Ð¸®¼¼ÄÁµå ´ÜÀ§ÀÇ ½ÇÇà½Ã°£ ÁÖ±âÀÌ´Ù. ¹Ýȯ °ªÀº intervalID·Î Á¤¼öÇüÀÌ´Ù. ÀÌ °ªÀº clear Interval() ÇÔ¼ö¸¦ ÀÌ¿ëÇØ ¹Ýº¹ ½ÇÇàÀ» ¸ØÃß´Â µ¥ »ç¿ëÇÑ´Ù.
ÀÌÁ¦ setInterval()¸¦ »ç¿ëÇØ ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú¸¦ ³Ö¾îº¸ÀÚ. ¸¸µé¾î º¼ ¾Ö´Ï¸ÞÀ̼ÇÀº ¿øÀÇ Å©±â°¡ Ä¿Á³´Ù ÀÛ¾ÆÁ³´Ù¸¦ ¹Ýº¹ÇÏ´Â ´Ü¼øÇÑ ¾Ö´Ï¸ÞÀ̼ÇÀÌ´Ù. µ¿ÀûÀ¸·Î ¿øÀÇ ¹ÝÁö¸§ °ªÀ» º¯È¯½ÃÅ°¸é ¿øÀÇ Å©±â°¡ º¯ÇÏ´Â È¿°ú¸¦ ³¾ ¼ö ÀÖ´Ù. <¸®½ºÆ® 5>¿Í <¸®½ºÆ® 6>Àº ÇØ´ç ¾Ö´Ï¸ÞÀ̼ÇÀÇ ÄÚµåÀ̸ç, °á°ú´Â http://bit.ly/vvvK03¿¡¼ º¼ ¼ö ÀÖ´Ù.
<¸®½ºÆ® 5> ¿øÀ» ±×¸®´Â ¿¹Á¦ var canvas = document.getElementById('myCanvas'), context = canvas.getContext('2d'); function drawCircle(rad) { context.beginPath(); context.arc(200, 200, rad, 0, Math.PI*2, true); context.stroke(); } |
¸ÕÀú context °´Ã¼¸¦ »ý¼ºÇÑ ÈÄ, ¿øÀ» ±×¸®´Â drawCircle() ÇÔ¼ö¸¦ »ý¼ºÇß´Ù. drawCircle() ÇÔ¼ö´Â ¹ÝÁö¸§À» ¸Å°³º¯¼ö·Î ¹Þ¾Æ Áß½ÉÁ¡(200px, 200px)¿¡ ¿øÀ» ±×¸°´Ù.
¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú¸¦ Ç¥ÇöÇÏ´Â <¸®½ºÆ® 6>À» »ìÆ캸ÀÚ.
<¸®½ºÆ® 6> ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú¸¦ Ç¥ÇöÇÏ´Â ¿¹Á¦ (function() { var rad, i = 0; setInterval(function() { i++; i = i % 360; rad = Math.sin(Math.PI / 180 * i) * 50 + 80; context.clearRect(0, 0, 500, 400); drawCircle(rad); }, 33); })(); |
<¸®½ºÆ® 6>¿¡´Â ½º½º·Î ½ÇÇàµÇ´Â À͸íÇÔ¼ö°¡ »ç¿ëµÆ´Ù. ÀÚ¹Ù½ºÅ©¸³Æ®¿¡¼ ÇÔ¼ö¸¦ °ýÈ£·Î °¨½Ñ µÚ ±× µÚ¿¡ °ýÈ£¸¦ Ãß°¡ÇÏ¸é ¼±¾ðµÇ¸ç ½ÇÇàµÇ´Â ÇüÅÂÀÇ ÇÔ¼ö°¡ »ý¼ºµÈ´Ù. ´Ü Çѹø ½ÇÇàµÇ´Â ÇÔ¼ö°¡ ÀÖÀ» ¶§ À¯¿ëÇÏ°Ô »ç¿ëÇÒ ¼ö ÀÖ´Â ¹æ¹ýÀÌ´Ï Âü°íÇÏÀÚ.
ÇÔ¼ö ³»ºÎ¿¡´Â º¯¼ö ¡®rad¡¯¿Í ¡®i¡¯¸¦ ¼±¾ðÇß´Ù. rad´Â ¹ÝÁö¸§ °ªÀ̸ç, i´Â ¹ÝÁö¸§ °ªÀ» °è»êÇϱâ À§ÇØ µ¿ÀûÀ¸·Î º¯ÇÏ´Â °ªÀÌ´Ù.
¹ÝÁö¸§ °ªÀÎ i´Â ÀÚ¹Ù½ºÅ©¸³Æ® Math °´Ã¼ÀÇ sin() ÇÔ¼ö¸¦ ÀÌ¿ëÇØ °è»êµÈ´Ù. °ªÀÌ Áøµ¿ÇÏ´Â sin() ±×·¡ÇÁÀÇ Æ¯¼ºÀ» ÀÌ¿ëÇÑ °ÍÀ¸·Î ¿øÀÇ Å©±â´Â sin() ±×·¡ÇÁÀÇ y°ª°ú °°ÀÌ Ä¿Á³´Ù ÀÛ¾ÆÁ³´Ù¸¦ ¹Ýº¹ÇÑ´Ù. sin() ÇÔ¼öÀÇ ÀÎÀÚ·Î ¶óµð¾È °ªÀ» ³Ñ°ÜÁà¾ß Çϸç, Math.PI °ªÀ» 180À¸·Î ³ª´« °ª¿¡ 0¿¡¼ 360±îÁöÀÇ °ªÀ» °öÇØÁÖ´Â ¹æ½ÄÀ¸·Î °ªÀ» ¹Ù²å´Ù. ÀÌ·± ¹æ¹ýÀ¸·Î sin()Àº -1¿¡¼ 1±îÁöÀÇ °ªÀ¸·Î Áøµ¿ÇÑ´Ù. ¿©±â¿¡ 50À» °öÇÏ°í 80À» ´õÇؼ ¹ÝÁö¸§ÀÌ 30px¿¡¼ 130px±îÁö º¯ÇÏ´Â ¿ø ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú¸¦ ¿Ï¼ºÇß´Ù.
Âü°í·Î ¿øÀ» ±×¸®´Â drawCircle() ÇÔ¼ö¸¦ È£ÃâÇϱâ Àü¿¡ clearRect() ÇÔ¼ö¸¦ ¸ÕÀú È£ÃâÇß´Ù. clearRect()´Â ĵ¹ö½º¸¦ Áö¿ì´Â ÇÔ¼ö·Î ÀÌÀü¿¡ ±×·È´ø ¿øÀÌ Áö¿öÁø ÈÄ »õ·Î¿î ¿øÀ» ±×¸®´Â °ÍÀÌ ¹Ýº¹µÅ »ç¶÷ÀÇ ´«¿¡´Â ¾Ö´Ï¸ÞÀ̼Çó·³ º¸ÀÌ°Ô µÈ´Ù.
¸¸¾à clearRect() ÇÔ¼ö°¡ ¾øÀ¸¸é ÀÌÀü¿¡ ±×·È´ø ¿øµéÀÌ Äµ¹ö½º¿¡ °è¼Ó ³²´Â ¹®Á¦°¡ ¹ß»ýµÈ´Ù. clearRect() ÇÔ¼ö´Â Á¡(0, 0)¿¡¼ Á¡(500, 400) ¹üÀ§¸¦ Áö¿ì¹Ç·Î ĵ¹ö½º Àüü¸¦ Áö¿ì´Â °Í°ú °°´Ù. ªÀº ÄÚµåÁö¸¸ <¸®½ºÆ® 5>¿¡ <¸®½ºÆ® 6>À» Ãß°¡ÇÏ¸é ¿øÀÇ Å©±â°¡ µ¿ÀûÀ¸·Î º¯ÇÏ´Â ¾Ö´Ï¸ÞÀ̼ÇÀ» º¼ ¼ö ÀÖ´Ù.
Áö±Ý±îÁö ĵ¹ö½º API¸¦ È°¿ëÇØ °¡Àå ±âº»ÀûÀÎ ±×¸² ±×¸®±â¿Í ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú¸¦ ±¸ÇöÇØ ºÃ´Ù. ±âÃÊÀûÀÌ°í ½¬¿î ÄÚµåÀÌÁö¸¸ ±âº»À» Àß ÀÍÇô µÐ´Ù¸é ´õ ¿ªµ¿ÀûÀÌ°í È·ÁÇÑ °í±Þ ¾Ö´Ï¸ÞÀÌ¼Ç È¿°úµµ ¾î·ÆÁö ¾Ê°Ô ¸¸µé ¼ö ÀÖÀ» °ÍÀÌ´Ù.
Âü°íÀÚ·á 1. RGraph www.rgraph.net/ 2. AwesomeChartJS cyberpython.github.com/AwesomeChartJS/ 3. ±¸±Û ¹Ùµð bodybrowser.googlelabs.com 4. Mr. Doob mrdoob.com 5. Chrome WebGL Experiments www.chromeexperiments.com/webgl 6. SketchPad mugtug.com/sketchpad |
|