ĵ¹ö½º´Â <canvas> ű׷ΠÃâ·Â ¿µ¿ªÀ» ÁöÁ¤Çϸç ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ
±×¸®±â ¸Þ¼µå¸¦ È£ÃâÇÏ¿© ĵ¹ö½º¿¡ ¿øÇÏ´Â ±×¸²À» ±×¸°´Ù. ĵ¹ö½º¸¦ »ç¿ëÇÏ´Â °¡Àå °£´ÜÇÑ Çü½ÄÀº ´ÙÀ½°ú
°°´Ù.
canvastest.html
<!DOCTYPE html>
<head>
<meta
charset="utf-8">
<title>canvastest</title>
</head>
<body>
<p>ĵ¹ö½º¿¡
Á÷Á¢ ±×¸°´Ù.</p>
<canvas
id="canvas" width="400" height="200">
</canvas>
<script>
window.onload
= function() {
var
canvas = document.getElementById("canvas");
if
(canvas == null || canvas.getContext == null) return;
var
ctx = canvas.getContext("2d");
ctx.strokeRect(10,10,100,100);
}
</script>
</body>
</html>
<p> ű׷Π¹®´ÜÀ» ¹èÄ¡ÇÏ°í <canvas> ű׷Πĵ¹ö½º¸¦ Á¤ÀÇÇÑ´Ù. <canvas>µµ
´Ù¸¥ ÅÂ±×¿Í ¸¶Âù°¡Áö ÀÚ°ÝÀ» °¡Áø´Ù´Â °ÍÀ» º¸À̱â À§ÇØ ¹®´Ü°ú ÇÔ²² ¹èÄ¡Çß´Ù. ĵ¹ö½º ¾Æ·¡ÂÊ¿¡µµ ¹°·Ð
´Ù¸¥ ű׸¦ ¾ó¸¶µçÁö ¹èÄ¡ÇÒ ¼ö ÀÖÀ¸¸ç ¿©·¯ °³ÀÇ Äµ¹ö½º¸¦ ¹èÄ¡ÇÒ ¼öµµ ÀÖ´Ù. ĵ¹ö½ºÀÇ ÁÖ¿ä ¼Ó¼ºÀº
´ÙÀ½ ¼¼ °³°¡ ÀÖ´Ù.
¡á id
: ĵ¹ö½º´Â ±×¸®±â ¿µ¿ª¸¸ Á¤ÀÇÇÒ »ÓÀ̸ç
±×¸®±â µ¿ÀÛÀº Äڵ忡¼ ó¸®ÇÑ´Ù. ½ºÅ©¸³Æ®¿¡¼ ĵ¹ö½º¸¦ ÂüÁ¶Çؾß
ÇϹǷΠ¹Ýµå½Ã id¸¦
ÁöÁ¤ÇØ¾ß ÇÑ´Ù. ¿©·¯
°³ÀÇ Äµ¹ö½º¸¦ ¹èÄ¡ÇÒ °æ¿ì
°¢°¢ ´Ù¸¥ id¸¦
ÁÖ¾î¾ß ÇÑ´Ù.
¡á width,
height : ĵ¹ö½ºÀÇ Å©±â¸¦ Çȼ¿
´ÜÀ§·Î ÁöÁ¤ÇÏ¸ç ½ÇÇàÁß¿¡ Å©±â¸¦
º¯°æÇÏ´Â °Íµµ °¡´ÉÇÏ´Ù. µðÆúÆ®
Å©±â´Â 300 * 150À¸·Î Á¼°Ô
¼³Á¤µÇ¾î Àִµ¥ ±×¸®°íÀÚ ÇÏ´Â ³»¿ëÀ»
ÃæºÐÈ÷ Ç¥ÇöÇÒ¸¸ÇÑ Å©±â·Î º¯°æÇϸé
µÈ´Ù.
ÀÌ 3°³ÀÇ ¼Ó¼ºÀº °ÅÀÇ ÇʼöÀûÀ¸·Î ÁöÁ¤ÇØ¾ß ÇÑ´Ù. ¹°·Ð ÀÌ ¿Ü¿¡µµ class, title, hidden °°Àº Àü¿ª
¼Ó¼ºµµ ÁöÁ¤ÇÒ ¼ö ÀÖ´Ù. ĵ¹ö½º¸¦ ¹èÄ¡ÇÑ ÈÄ ÀÚ¹Ù½ºÅ©¸³Æ®¿¡¼ ±×¸®±â ¸Þ¼µå¸¦ È£ÃâÇÏ¿© ±×·¡ÇÈÀ» Ãâ·ÂÇÑ´Ù. ÆäÀÌÁö°¡ ¿ÏÀüÈ÷ ·ÎµåµÈ ÈÄ¿¡ ±×·Á¾ß ÇϹǷΠwindowÀÇ onload À̺¥Æ®¿¡ ±×¸®±â Äڵ带 ÀÛ¼ºÇÏ´Â °ÍÀÌ ÁÁ´Ù. ±×¸²¸¸ ±×¸±
¶§´Â ¾Æ¹« ¶§³ª ±×·Áµµ »ó°ü¾øÁö¸¸ À̹ÌÁö³ª »ç¿îµå°°Àº ºÎ¼Ó ÆÄÀÏÀÌ ÀÖ´Â °æ¿ì´Â ºÎ¼Ó ÆÄÀϱîÁö ·ÎµåµÇ¾î¾ß Á¦´ë·Î µ¿ÀÛÇÒ ¼ö ÀÖ´Ù. ÀÌ ½ÃÁ¡ÀÌ ¹Ù·Î onloadÀÌ´Ù.
getElementById ¸Þ¼µå·Î ĵ¹ö½º °´Ã¼¸¦ ¸ÕÀú ã°í ĵ¹ö½ºÀÇ
getContext ¸Þ¼µå·Î ±×¸®±â ÄÁÅؽºÆ®¸¦ ±¸ÇÑ´Ù. ¾ÆÁ÷±îÁö´Â
¿¡·¯ 󸮰¡ ÇÊ¿äÇÏ´Ù. canvas űװ¡ ¹®¼¿¡ ¾øÀ¸¸é ±×¸± ¿µ¿ªÀÌ ¾ø´Ù´Â ¶æÀÌ°í ÄÁÅؽºÆ®¸¦ ã´Â
¸Þ¼µå°¡ ¾ø´Ù¸é ºê¶ó¿ìÀú°¡ ĵ¹ö½º¸¦ Áö¿øÇÏÁö ¾Ê´Â´Ù´Â ¶æÀÌ´Ù. ÀÌ °æ¿ì´Â ´õ ÀÌ»ó ±×¸®±â¸¦ ÇÏÁö ¸»°í
¹Ù·Î ¸®ÅÏÇØ¾ß ÇÑ´Ù.
ÄÁÅؽºÆ®´Â ĵ¹ö½ºÀÇ ±×¸®±â ¿µ¿ªÀÌ¸é¼ ±×¸®±â ¸Þ¼µå¸¦ °¡Áö´Â °´Ã¼ÀÌ´Ù.
getContext ¸Þ¼µåÀÇ Àμö·Î ¿øÇÏ´Â ÄÁÅؽºÆ®ÀÇ Á¾·ù¸¦ Àü´ÞÇÑ´Ù. ÇöÀç´Â 2d ±×¸®±â¸¸ °¡´ÉÇϳª OpenGL ES¸¦ °³·®ÇÑ WebGLÀÌ °³¹ßµÇ°í ÀÖ´Â ÁßÀ̹ǷΠÁ¶¸¸°£ 3d ±×¸®±â·Î È®ÀåµÉ ¿¹Á¤ÀÌ´Ù. getContextÀÇ Àμö·Î Àü´ÞµÇ´Â ÄÁÅؽºÆ® Á¾·ù´Â ¹®ÀÚ¿À̹ǷΠ¹Ýµå½Ã µû¿ÈÇ¥·Î °¨½Î "2d"¶ó°í Àû¾î¾ß ÇÏ¸ç ´ë¹®ÀÚ¸¦ ÀÎÁ¤ÇÏÁö ¾ÊÀ¸¹Ç·Î
"2D"¶ó°í Àû¾î¼´Â ¾ÈµÈ´Ù.
canvas.getContext("2d") //
¸ÂÀ½
canvas.getContext("2D") //
Ʋ¸²
canvas.getContext(2d) //
Ʋ¸²
getContext("2d") È£Ãâ·Î CanvasRenderingContext2D ŸÀÔÀÇ °´Ã¼°¡ ¸®ÅϵǴµ¥ ÀÌ °´Ã¼°¡ ¹Ù·Î ±×¸®±â ¸Þ¼µå¿Í ¼Ó¼ºÀ»
°¡Áö´Â ÄÁÅؽºÆ®ÀÌ´Ù. ÄÁÅؽºÆ®¸¦ ctx º¯¼ö¿¡ ´ëÀÔÇÏ°í ÀÌÈĺÎÅÍ ctxÀÇ ¸Þ¼µå·Î ±×¸®±â¸¦ ¼öÇàÇÑ´Ù. ¿¹Á¦¿¡¼´Â strokeRect ¸Þ¼µå·Î »ç°¢ÇüÀ» ±×·È´Ù. ĵ¹ö½º ¾ÈÂÊ¿¡ ȸ»ö
»ç°¢ÇüÀÌ Ãâ·ÂµÈ´Ù.
À§ ¿¹Á¦´Â ĵ¹ö½º¸¦ »ç¿ëÇÏ´Â ±âº»ÀûÀÎ ÀýÂ÷¸¦ Àß º¸¿© ÁØ´Ù. ¹®¼ÀÇ
Àû´çÇÑ À§Ä¡¿¡ ĵ¹ö½º ű׸¦ ¹èÄ¡ÇÏ°í ¹®¼ ·Îµå°¡ ¿Ï·áµÇ´Â onload À̺¥Æ®¿¡ ±×¸®±â Äڵ带 ÀÛ¼ºÇÑ´Ù. ĵ¹ö½º °´Ã¼¸¦ ã°í ĵ¹ö½º·ÎºÎÅÍ ÄÁÅؽºÆ®¸¦ ±¸ÇÑ ÈÄ ÄÁÅؽºÆ®ÀÇ ±×¸®±â °ü·Ã ¸Þ¼µå¸¦ È£ÃâÇÏ´Â ½ÄÀÌ´Ù. ÀÌ ÄÚµå´Â °ÅÀÇ Á¤ÇüȵǾî ÀÖÀ¸¸ç ÀÌÈÄ ´Þ¶óÁö´Â ºÎºÐÀº ÄÁÅؽºÆ®¿¡¼ È£ÃâÇÏ´Â ¸Þ¼µåÀÌ´Ù. ¾î¶² ¸Þ¼µå¸¦ È£ÃâÇÒ °ÍÀΰ¡¿¡ µû¶ó Ãâ·ÂÀÌ ´Þ¶óÁø´Ù.
ĵ¹ö½º¸¦ ã°í ÄÁÅؽºÆ®¸¦ ±¸ÇÏ°í ¿¡·¯ ó¸®ÇÏ´Â °úÁ¤Àº Ç×»ó ¹Ýº¹µÇ´Â °úÁ¤À̸ç È£ÃâÇÏ´Â ±×¸®±â ¸Þ¼µå¸¸ ´Þ¶óÁú
»ÓÀÌ´Ù. ½Ç½À ÆíÀÇ¿Í ¿¡·¯ ó¸®, ±×¸®°í ¸íÈ®ÇÑ °á°ú È®ÀÎÀ»
À§ÇØ ¿¹Á¦¸¦ ´ÙÀ½°ú °°ÀÌ ÀçÀÛ¼ºÇÏ¿´´Ù.
canvasexample.html
<!DOCTYPE html>
<head>
<meta
charset="utf-8">
<title>canvasexample</title>
<style>
canvas
{border:5px solid magenta;}
</style>
</head>
<body>
<canvas
id="canvas" width="400" height="200">
ÀÌ
ºê¶ó¿ìÀú´Â ĵ¹ö½º¸¦ Áö¿øÇÏÁö ¾Ê½À´Ï´Ù.
</canvas>
<script>
var
canvas;
var
ctx;
window.onload
= function() {
canvas
= document.getElementById("canvas");
if
(canvas == null || canvas.getContext == null) return;
ctx
= canvas.getContext("2d");
draw();
}
function
draw() {
ctx.strokeRect(10,10,100,100);
}
</script>
</body>
</html>
ĵ¹ö½º ÀÚü´Â ±×¸®±â ¿µ¿ªÀÏ »ÓÀ̹ǷΠ³»¿ë¹°ÀÌ ¾ø´Ù. ¾Æ¹«°Íµµ ±×¸®Áö
¾ÊÀ¸¸é ºó »ç°¢ÇüÀ̶ó Á¸Àç°¡ º¸ÀÌÁö ¾Ê´Â´Ù. ±×·¡¼ ½ºÅ¸ÀÏÀ» ÁöÁ¤ÇÏ¿©
5Çȼ¿ÀÇ µÎ²¨¿î ºÐÈ«»ö °æ°è¼±À» ±×·Á ³Ö¾ú´Ù. Á» À¯Ä¡ÇÏÁö¸¸ Äڵ忡 ÀÇÇÑ ±×·¡ÇÈ Ãâ·Â°ú
±¸ºÐÇϱâ À§ÇØ Àß ¾È¾²´Â »öÀ¸·Î ÁöÁ¤Çß´Ù. ½ÇÇà °á°ú´Â ´ÙÀ½°ú °°´Ù.
ºÐÈ«»ö °æ°è°¡ ¾øÀ¸¸é ¾îµð°¡ ĵ¹ö½º ¿µ¿ªÀÎÁö ±¸ºÐµÇÁö ¾Ê´Â´Ù. ¹°·Ð ½ÇÁ¦ ÇÁ·ÎÁ§Æ®¿¡¼´Â
°æ°è¼±ÀÌ ¾ø¾îµµ ¹«¹æÇÏ´Ù.
<canvas> ű×ÀÇ ¾ÈÂÊ¿¡´Â ĵ¹ö½º¸¦ Áö¿øÇÏÁö ¸øÇÏ´Â
ºê¶ó¿ìÀú¸¦ À§ÇØ ´ëü¹°À» ³Ö´Â´Ù. ĵ¹ö½º Å©±â¿Í µ¿ÀÏÇÑ À̹ÌÁö°¡ °¡Àå ÀÌ»óÀûÀÌ´Ù. Å©±â°¡ µ¿ÀÏÇØ¾ß ·¹À̾ƿôÀÌ À¯ÁöµÈ´Ù. ÀÌ¿ÕÀ̸é À̹ÌÁöÀÇ alt ¼Ó¼º¿¡ ¼³¸íÀ» ÀÛ¼ºÇÏ¿© ½Ã°¢ Àå¾ÖÀεµ ¹è·ÁÇÏ´Â °ÍÀÌ ÁÁ´Ù. ¿¹Á¦¿¡¼´Â
°£´ÜÇÏ°Ô ¾È³» ¹®ÀÚ¿¸¸ ³Ö¾ú´Ù.
ĵ¹ö½º¿Í ÄÁÅؽºÆ® °´Ã¼ canvas, ctx¸¦ ÄÚµåÀÇ ¾îµð¿¡¼³ª ÂüÁ¶ÇÒ
¼ö ÀÖµµ·Ï Àü¿ª º¯¼ö·Î ¼±¾ðÇß´Ù. ÀÌ µÎ °´Ã¼´Â ĵ¹ö½º¸¦ ÇÁ·Î±×·¡¹ÖÇÏ·Á¸é ´Ã ÇÊ¿äÇϹǷΠÀü¿ªÀ¸·Î ¼±¾ðÇÏ´Â
°ÍÀÌ Æí¸®ÇÏ´Ù. »ç½Ç canvas °´Ã¼´Â ctxÀÇ canvas ¼Ó¼ºÀ¸·Îµµ ±¸ÇÒ ¼ö ÀÖÀ¸¹Ç·Î ±»ÀÌ Àü¿ªÀÌ ¾Æ´Ï¾îµµ
»ó°ü¾øÁö¸¸ ÇÑ ´Ü°è ´õ °ÅÄ¡´Â °ÍÀÌ ±ÍÂú¾Æ µû·Î ¼±¾ðÇØ µÎ¾ú´Ù.
onloadÀÇ À̺¥Æ® Çڵ鷯¿¡¼ ÇÏ´Â ÀÏÀº °ÅÀÇ ÀÏÁ¤ÇϹǷΠ´õ ÀÌ»ó
»ìÆ캼 ÇÊ¿ä°¡ ¾ø´Ù. ±×·¡¼ ±×¸®±â¿Í °ü·ÃµÈ Äڵ常 draw ¸Þ¼µå·Î
ºÐ¸®Çß´Ù. draw´Â Àü¿ªÀ¸·Î ¼±¾ðµÈ ctxÀÇ ¸Þ¼µå¸¦ È£ÃâÇÏ¿©
±×¸²À» Ãâ·ÂÇÏ°í ±×¸®±â ¼Ó¼ºÀ» º¯°æÇÑ´Ù. ÀÌÈÄ ½Ç½À¿¡¼´Â draw ¸Þ¼µå
¾ÈÂʸ¸ º¸À̱â·Î ÇÑ´Ù. Áö¸é Àý¾à»Ó¸¸ ¾Æ´Ï¶ó µ¶ÀÚµéÀÌ »ìÆìºÁ¾ß ÇÒ Äڵ带 ÃÖ¼ÒÇÏÇÏ¿© ÁýÁßÇϱ⠽±µµ·Ï
Çϱâ À§ÇؼÀÌ´Ù.
½ÇÇà°á°úµµ ºÐÈ«»ö »ç°¢Çü ¾ÈÂʸ¸ ´Þ¶óÁö¹Ç·Î ±»ÀÌ ºê¶ó¿ìÀú Àüü¸¦ ´Ù º¸ÀÏ ÇÊ¿ä°¡ ¾øÀ¸¸ç ÀÌ »ç°¢Çü ¾ÈÂʸ¸ Áö¸é¿¡
ĸóÇؼ º¸À̵µ·Ï ÇÑ´Ù. ¹°·Ð ÀÌ ¼Ò½º´Â ½Ç½À ÆíÀǸ¦ À§ÇØ ÀÛ¼ºÇÑ °Í »ÓÀ̹ǷΠ½ÇÁ¦ ÇÁ·ÎÁ§Æ®ÀÇ ÇüÅ´Â
´Ù¾ÓÇÒ °ÍÀÌ´Ù. ÀÌ ±¸Á¶¿Í ´Þ¶óÁö´Â ¿¹Á¦¸¸ Àüü ¼Ò½º¸¦ º¸ÀÏ °ÍÀÌ´Ù.