ĵ¹ö½º¸¦ »ç¿ëÇÏ¿© ¸¶¿ì½º°¡ ¿òÁ÷À̴´ë·Î ÀÚÀ¯ °î¼±À» ±×·Á º¸ÀÚ. ¼±ÀÇ
»ö»ó°ú ±½±âµµ ¹Ù²ã º¸°í ¸ðµÎ Áö¿ì´Â ±â´Éµµ ÀÛ¼ºÇØ º¼ °ÍÀÌ´Ù. ĵ¹ö½º ÀÌÀü¿¡´Â HTML ÆäÀÌÁö¿¡ ÀÌ·± ÀÚÀ¯·Î¿î ±×¸²À» ¸¶À½´ë·Î ±×¸± ¼ö°¡ ¾ø¾ú´Ù. ÇÏÁö¸¸
ÀÌÁ¦ ĵ¹ö½º°¡ ±×¸®±â Ç¥¸éÀ» Á¦°øÇØ ÁֹǷΠ¸¶¿ì½º À̺¥Æ®¸¸ Àß Ã³¸®ÇÏ¸é µµÇüÀ» ÀÚÀ¯ ÀÚÀç·Î ±×¸± ¼ö ÀÖ´Ù.
ÀÚÀ¯ °î¼± ±×¸®±â ¿¹Á¦´Â ±×·¡ÇÈÀ» ¹è¿ì´Â °³¹ßÀÚµéÀÌ °¡Àå ¸ÕÀú ¸¸µé¾î º¸´Â ½¬¿î ¿¹Á¦ÀÌ´Ù. ¹°·Ð °¢ ±×·¡ÇÈ ½Ã½ºÅÛ¸¶´Ù °íÀ¯ÇÑ Æ¯¼ºÀ̳ª ¹æ¹ýÀÌ ÀÖ°Ô ¸¶·ÃÀε¥ ÀÌ ¿¹Á¦¸¦ ÅëÇØ Äµ¹ö½º¿¡¼ÀÇ ±×¸®±â¸¦ ¿¬½ÀÇØ
º¸ÀÚ. ¸¶¿ì½º °ü·Ã À̺¥Æ®¸¸ Àß ºÐ¼®ÇØ º¸¸é µÈ´Ù.
freeline.html
<!DOCTYPE html>
<head>
<meta
charset="utf-8">
<title>freeline</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
drawing = false; //
ÇöÀç ±×¸®´Â ÁßÀΰ¡?
window.onload
= function() {
canvas
= document.getElementById("canvas");
if
(canvas == null || canvas.getContext == null) return;
ctx
= canvas.getContext("2d");
ctx.lineCap="round";
//
ÇöÀç À§Ä¡¸¦ ÀúÀåÇÑ´Ù.
canvas.onmousedown
= function(e) {
e.preventDefault();
sx
= canvasX(e.clientX);
sy
= canvasY(e.clientY);
drawing
= true;
}
//
ÇöÀç À§Ä¡¿¡¼ »õ·Î À̵¿ÇÑ °÷±îÁö ¼±À» ±×¸°´Ù.
canvas.onmousemove
= function(e) {
if
(drawing) {
e.preventDefault();
ctx.beginPath();
ctx.moveTo(sx,
sy);
sx
= canvasX(e.clientX);
sy
= canvasY(e.clientY);
ctx.lineTo(sx,
sy);
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>
»ö»ó, ±½±â ¿É¼ÇÀÌ ¸¹¾Æ¼ ±×·¸Áö ¸¶¿ì½º À̺¥Æ® ÄÚµå´Â ¾ÆÁÖ °£´ÜÇÏ´Ù. ĵ¹ö½º À§ÂÊ¿¡¼´Â ¼±ÀÇ »ö»ó°ú ±½±â¸¦ ¼±ÅÃÇÏ´Â ÄÁÆ®·Ñ°ú ¸ðµÎ Áö¿ì±â ¹öÆ°À» ¹èÄ¡Çß´Ù. »ö»ó°ú ±½±â´Â ¸ðµÎ ÄÁÅؽºÆ®ÀÇ ¼Ó¼ºÀ̹ǷΠÀÌ ÄÁÆ®·ÑÀÇ onchange À̺¥Æ®
Çڵ鷯¿¡¼ ÄÁÅؽºÆ®ÀÇ ¼Ó¼º¸¸ º¯°æÇÏ¸é µÈ´Ù. ¸ðµÎ Áö¿ì±â ¹öÆ°Àº ĵ¹ö½º Àü ¿µ¿ªÀ» »èÁ¦ÇÑ´Ù. Å« ±×¸²À» ±×¸± ¼ö ÀÖµµ·Ï ĵ¹ö½º´Â 600 * 400À¸·Î ÅÁ÷ÇÏ°Ô
¹èÄ¡Çß´Ù. ±×¸®±â ÄÚµå´Â ĵ¹ö½ºÀÇ ¸¶¿ì½º À̺¥Æ® Çڵ鷯¿¡ ÀÛ¼ºµÇ¾î ÀÖ´Ù. ½ÇÇàÇØ º¸ÀÚ.
onload¿¡¼ ĵ¹ö½º¸¦ ã°í ÄÁÅؽºÆ®¸¦ ±¸ÇÑ ÈÄ lineCap ¼Ó¼ºÀ» round·Î ÃʱâÈÇÑ´Ù. ±½Àº ¼±À» ÀÌ¾î¼ ±×¸®¸é °¢µµ°¡ Ä¿Áú ¶§ ²÷¾îÁ® º¸ÀÏ ¼ö ÀÖÀ¸¹Ç·Î ¼± ³¡ÂÊÀ¸·Î ¾à°£ ´õ È®ÀåÇÏ¿© ¿¬¼ÓÀûÀÎ ¼±ÀÌ
µÇµµ·Ï ÇÏ¿´´Ù. ĵ¹ö½º¸¦ ãÀº ÈÄ ¸¶¿ì½º À̺¥Æ®¿¡ ´ëÇÑ Çڵ鷯¸¦ µî·ÏÇÑ´Ù. ´ëºÎºÐÀÇ ±×¸®±â´Â ÀÌ Çڵ鷯¿¡¼ ¼öÇàµÈ´Ù.
¸¶¿ì½º ¹öÆ°À» ´©¸£¸é sx, sy º¯¼ö¿¡ ÇöÀç À§Ä¡¸¦ ÀúÀåÇØ µÐ´Ù. ±×¸®°í drawing º¯¼ö¿¡
true¸¦ ´ëÀÔÇÏ¿© ±×¸®´Â ÁßÀÓÀ» Ç¥½ÃÇÑ´Ù. ¸¶¿ì½º°¡ À̵¿Çϸé sx, sy·Î ÇöÀç À§Ä¡¸¦ ¿Å±â°í »õ À§Ä¡¸¦ sx, sy¿¡ ´Ù½Ã Á¶»çÇÑ
ÈÄ ¿©±â±îÁö ¼±À» ±ß´Â´Ù. ÀÌ °úÁ¤À» °è¼Ó ¹Ýº¹ÇÏ¸é ¸¶¿ì½º°¡ À̵¿ÇÏ´Â Á·Á· ÀÌÀü À§Ä¡¿¡¼ Ä¿¼°¡ À̵¿ÇÑ
À§Ä¡±îÁö Á÷¼±ÀÌ ±×¾îÁø´Ù. ½ÇÁ¦·Î ±×¸®´Â °ÍÀº Á÷¼±ÀÌÁö¸¸ Á÷¼±ÀÇ ±æÀÌ°¡ ª±â ¶§¹®¿¡ °î¼±Ã³·³ º¸ÀδÙ.
ÀÌ·¸°Ô ±×·ÁÁø ±×¸²Àº ĵ¹ö½º¿¡ »õ°ÜÁø´Ù. °¢ ¼±ÀÌ Áö³ª´Â Á¡ÀÇ »ö»ó
Á¤º¸°¡ ĵ¹ö½ºÀÇ ºñÆ®¸Ê Ç¥¸é¿¡ ±â·ÏµÈ´Ù. ÀÏ´Ü ±×·ÁÁø ÈÄ¿¡´Â ĵ¹ö½º¿¡ Á¡¸¸ ³²À» »Ó ¾î¶² ¼±À» ±×·È´Â°¡¿¡
´ëÇÑ Á¤º¸°¡ ¾ø´Ù. µû¶ó¼ ÀÌ¹Ì ±×·ÁÁø ¼±À» ¿Å±â°Å³ª »ö»óÀ» ¹Ù²Ü ¼ö ¾øÀ¸¸ç ´Ù¸¥ ¼±À¸·Î µ¤¾î¼ Áö¿ì°Å³ª
»õ·Î ±×¸®´Â ¹æ¹ý¹Û¿¡ ¾ø´Ù. ´ë½Å Á÷¼±ÀÇ ÀϺθ¦ ´Ù¸¥ Á÷¼±À¸·Î µ¤À» ¼ö ÀÖ°í Á÷¼±ÀÌ ¾Æ¹«¸® ¸¹¾ÆÁ®µµ
»ó°ü¾ø´Ù. ¾îÂ÷ÇÇ Äµ¹ö½ºÀÇ Ç¥¸éÀº ÀÏÁ¤ÇϹǷΠ¼±À» ¸¹ÀÌ ±×¸°´Ù°í Çؼ ¸Þ¸ð¸® »ç¿ë·®ÀÌ ´Ã¾î³ª°Å³ª ¼Óµµ°¡
´À·ÁÁöÁö ¾Ê´Â´Ù. ÀÌ°ÍÀÌ Áï½Ã ¸ðµåÀÇ ÀåÁ¡ÀÌ´Ù.