À̹ø¿¡´Â ÇÑ´Ü°è ´õ º¹ÀâÇÑ µµÇüÀ» ±×·Á º¸ÀÚ. ÀÚÀ¯ °î¼±Àº ¸¶¿ì½º°¡
À̵¿ÇÏ´Â Áï½Ã ¹Ù·Î ±×¸®¸é µÈ´Ù. ¾Æ·¡ÂÊ¿¡ ¾î¶² ±×¸²ÀÌ ÀÖ´ø »ó°üÇÒ ÇÊ¿ä¾øÀÌ ¹«Á¶°Ç µ¤¾î¼ ±×¸®¸é ±×¸¸ÀÌ´Ù. ±×·¯³ª Á÷¼±À̳ª »ç°¢Çü °°Àº µµÇüÀÇ °æ¿ì´Â Å©±â¸¦ ÁöÁ¤ÇØ¾ß ÇϹǷΠÁï½Ã ±×¸®Áö ¾Ê´Â´Ù. ¸¶¿ì½º¸¦ ´©¸¦ ¶§ µå·¡±×¸¦ ½ÃÀÛÇÏ°í À̵¿ÇÏ´Â Á·Á· Å©±â¸¦ Á¶Á¤ÇÑ ÈÄ ÃÖÁ¾ÀûÀ¸·Î ¸¶¿ì½º ¹öÆ°À» ³õÀ» ¶§ È®Á¤µÈ
Å©±â´ë·Î µµÇüÀ» ±×·Á¾ß ÇÑ´Ù.
¸¶¿ì½º°¡ À̵¿ÁßÀÏ ¶§´Â ¾ÆÁ÷ µµÇüÀÌ È®Á¤µÈ °ÍÀÌ ¾Æ´Ï¹Ç·Î Áß°£ °úÁ¤À» º¸¿© ÁÖ¾î¾ß ÇÏ¸ç ¸¶¿ì½º°¡ À̵¿ÇÒ ¶§¸¶´Ù
ÀÌÀü À̺¥Æ®¿¡¼ ±×·È´ø Á÷¼±À» Áö¿ö¾ß ÇÑ´Ù. Á÷¼± Çϳª¸¸ ±×¸°´Ù¸é ´Ù Áö¿ì°í »õ·Î ±×¸®¸é µÇ°ÚÁö¸¸ ¾Æ·¡ÂÊ¿¡
ÀÌ¹Ì ±×·ÁÁø Á÷¼±ÀÌ ÀÖÀ» ¶§´Â ĵ¹ö½ºÀÇ Ç¥¸éÀ» º¸È£ÇØ¾ß ÇÒ Àǹ«°¡ ÀÖ´Ù. ±×·¡¼ ĵ¹ö½º¸¦ ºñÆ®¸ÊÀ¸·Î
¶°¼ ¹é¾÷À» ÀúÀåÇÏ°í ¸Å¹ø ±×¸± ¶§¸¶´Ù ¹é¾÷À¸·Î º¹±¸ÇÑ ÈÄ »õ Á÷¼±À» ±×¾î¾ß ÇÑ´Ù.
drawlines.html
<!DOCTYPE html>
<head>
<meta
charset="utf-8">
<title>drawlines</title>
<style>
canvas
{border:5px solid magenta;}
</style>
</head>
<body>
<div>
»ö»ó : <select id="selcolor">
<option
value="black">°ËÁ¤</option>
<option
value="red">»¡°</option>
<option
value="green">ÃÊ·Ï</option>
<option
value="blue">ÆĶû</option>
<option
value="magenta">ºÐÈ«</option>
</select>
±½±â : <select id="selwidth">
<option
value="1">¾ã°Ô</option>
<option
value="3">Áß°£</option>
<option
value="5">±½°Ô</option>
</select>
<input
type="button" id="clear" value="¸ðµÎ Áö¿ò"/>
</div>
<canvas
id="canvas" width="600" height="400">
ÀÌ
ºê¶ó¿ìÀú´Â ĵ¹ö½º¸¦ Áö¿øÇÏÁö ¾Ê½À´Ï´Ù.
</canvas>
<script>
var
canvas;
var
ctx;
var
sx, sy; //
µå·¡±× ½ÃÀÛÁ¡
var
ex, ey; //
µå·¡±× ³¡Á¡
var
drawing; //
±×¸®°í ÀÖ´Â ÁßÀΰ¡
var
backup;
window.onload
= function() {
canvas
= document.getElementById("canvas");
if
(canvas == null || canvas.getContext == null) return;
ctx
= canvas.getContext("2d");
canvas.onmousedown
= function(e) {
e.preventDefault();
//
½ÃÀÛ ÁÂÇ¥ ±¸ÇÔ
sx
= canvasX(e.clientX);
sy
= canvasY(e.clientY);
//
¹é¾÷ ¶ß°í ±×¸®±â ½ÃÀÛ
backup
= ctx.getImageData(0, 0, canvas.width, canvas.height);
drawing
= true;
}
canvas.onmousemove
= function(e) {
e.preventDefault();
ex
= canvasX(e.clientX);
ey
= canvasY(e.clientY);
//
¹é¾÷ º¹±¸ÇÏ°í ÇöÀç ¼± ±×¸²
if
(drawing) {
ctx.putImageData(backup,
0, 0);
ctx.beginPath();
ctx.moveTo(sx,
sy);
ctx.lineTo(ex,
ey);
ctx.stroke();
}
}
canvas.onmouseup
= function(e) {
drawing
= false;
}
}
var
selcolor = document.getElementById("selcolor");
selcolor.onchange
= function(e) {
ctx.strokeStyle
= selcolor.value;
}
var
selwidth = document.getElementById("selwidth");
selwidth.onchange
= function(e) {
ctx.lineWidth
= selwidth.value;
}
var
btnclear = document.getElementById("clear");
btnclear.onclick
= function(e) {
ctx.clearRect(0,
0, canvas.width, canvas.height);
}
function
canvasX(clientX) {
var
bound = canvas.getBoundingClientRect();
var
bw = 5;
return
(clientX - bound.left - bw) * (canvas.width / (bound.width - bw * 2));
}
function
canvasY(clientY) {
var
bound = canvas.getBoundingClientRect();
var
bw = 5;
return
(clientY - bound.top - bw) * (canvas.height / (bound.height - bw * 2));
}
</script>
</body>
</html>
»ö»ó, ±½±â, ¸ðµÎ Áö¿ò
¹öÆ°ÀÇ À̺¥Æ® Çڵ鷯´Â ¾Õ ¿¹Á¦¿Í °°´Ù. ¸¶¿ì½º À̺¥Æ® Çڵ鷯ÀÇ Äڵ常 ¾à°£ ´Ù¸£´Ù. ¸¶¿ì½º ¹öÆ°À» ´©¸¥ ä·Î À̵¿ÇÏ¸é ¼±ÀÌ °°ÀÌ ´Ã¾î³ª¸ç ¹öÆ°À» ³õÀ» ¶§ ¼±ÀÌ È®Á¤µÈ´Ù.
¸¶¿ì½º ¹öÆ°À» ´©¸¦ ¶§ ½ÃÀÛ ÁÂÇ¥¸¦ sx, sy º¯¼ö¿¡ ±¸ÇØ ³õ´Â´Ù. ±×¸®°í °»½ÅÀ» À§ÇØ ÇöÀç ĵ¹ö½º »óŸ¦ backup º¯¼ö¿¡ ÀúÀåÇÑ´Ù. getImageData ¸Þ¼µå·Î ĵ¹ö½ºÀÇ Àüü ºñÆ®¸Ê Á¤º¸¸¦ ¶° ³õ´Â °ÍÀÌ´Ù.
¾Æ·¡ÂÊ¿¡ ±×·ÁÁø Á÷¼±ÀÌ ¸î °³Àΰ¡¿¡ »ó°ü¾øÀÌ Àüü ÇüŸ¦ ¹é¾÷ÇØ µÐ´Ù. Áï½Ã ¸ðµå´Â µµÇü¿¡
´ëÇÑ Á¤º¸°¡ ¾øÀ¸¹Ç·Î ºñÆ®¸ÊÀ» ¶° µÎÁö ¾ÊÀ¸¸é ±× Àü¿¡ ¹«¾ùÀÌ ±×·ÁÁ® ÀÖ¾ú´ÂÁö ¾Ë ¹æ¹ýÀÌ ¾ø´Ù.
¸¶¿ì½º ¹öÆ°ÀÌ ¿òÁ÷À̸é ÃÖÃÊ ´©¸¥ sx, sy ÁÂÇ¥¿¡¼ À̵¿ÇÑ »õ
ÁÂÇ¥ ex, ey·Î ¼±À» ±×¾î Áß°£ °úÁ¤À» º¸¿©ÁØ´Ù. À̶§
±×¸®´Â ¼±Àº ¾îµð±îÁö³ª ÀÓ½ÃÀûÀÎ ¼±ÀÏ »ÓÀÌ¸ç ¾ÆÁ÷ È®Á¤µÈ ¼±Àº ¾Æ´Ï´Ù. ¸Å ¸¶¿ì½º À̵¿¸¶´Ù ¹Ù²î¹Ç·Î
¿ø·¡ ±×¸²À» º¹±¸ÇÏ°í ÀÌ À§¿¡ Á÷¼±À» ±×·Á¾ß ÇÑ´Ù. backup¿¡´Â È®Á¤µÈ ¼±ÀÌ ±×·ÁÁ® ÀÖ°í ÀÓ½ÃÀûÀÎ
¼±Àº ÁÂÇ¥¸¦ ¹Ù²ã °¡¸ç °è¼Ó ´Ù½Ã ±×·ÁÁö´Â °ÍÀÌ´Ù.
¸¶¿ì½º ¹öÆ°À» ³õÀ» ¶§´Â ±×¸®±â¸¦ ÁßÁöÇϱ⸸ ÇÏ¸é µÈ´Ù. ¸¶¿ì½º À̵¿½Ã¿¡
±×·Á ³õÀº Àӽà Á÷¼±ÀÌ Äµ¹ö½º¿¡ »õ°ÜÁø ä·Î ³²¾Æ ÀÖÀ¸¹Ç·Î ¼±ÀÌ È®Á¤µÈ´Ù. ´ÙÀ½ ¸¶¿ì½º ¹öÆ°À» ´©¸£¸é
¶È°°Àº °úÁ¤ÀÌ °è¼Ó ¹Ýº¹µÈ´Ù. ÀÌ ¿¹Á¦¿¡¼ ¹é¾÷ÀÌ ¿Ö ÇÊ¿äÇÑÁö Àß ÀÌÇØ°¡ µÇÁö ¾Ê´Â´Ù¸é backup¿¡ ÀúÀå ¹× º¹±¸ÇÏ´Â Äڵ带 ÁÖ¼® ó¸®ÇÑ ÈÄ ½ÇÇàÇØ º¸¸é µÈ´Ù.
drawlines2.html
<!DOCTYPE html>
....
//
¹é¾÷ ¶ß°í ±×¸®±â ½ÃÀÛ
//
backup = ctx.getImageData(0, 0, canvas.width, canvas.height);
drawing
= true;
}
canvas.onmousemove
= function(e) {
e.preventDefault();
ex
= canvasX(e.clientX);
ey
= canvasY(e.clientY);
//
¹é¾÷ º¹±¸ÇÏ°í ÇöÀç ¼± ±×¸²
if
(drawing) {
//
ctx.putImageData(backup, 0, 0);
ctx.beginPath();
ctx.moveTo(sx,
sy);
ctx.lineTo(ex,
ey);
ctx.stroke();
}
}
backup º¯¼ö°¡ µé¾î°£ ¹®Àå µÎ ÁÙ¸¸ ÁÖ¼®Ã³¸®ÇÏ¸é µÈ´Ù. ÀÌ »óÅ¿¡¼ ½ÇÇàÇØ º¸ÀÚ.
¹é¾÷°ú º¹±¸¸¦ ÇÏÁö ¾ÊÀ¸¸é ±æÀÌ°¡ È®Á¤µÇÁöµµ ¾ÊÀº ¼±ÀÌ °è¼Ó ±×·ÁÁö¸ç ĵ¹ö½º Ç¥¸é¿¡ ÀÌ¹Ì ±×·Á ³õÀº Á÷¼±µµ Æı«µÈ´Ù. ¹é¾÷Àº ÀÌÀü »óŸ¦ ±×´ë·Î À¯ÁöÇÏ¸é¼ Àӽà Á÷¼±À» ÀÚÀ¯·Ó°Ô ÆíÁýÇϱâ À§ÇØ ÇÊ¿äÇÏ´Ù.