10-01마우스이벤트연습.html
0.00MB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var myCanvas, myCtx;
var startx, starty, endx, endy;
function drawLine() {
myCanvas = document.getElementById('myCanvas');
myCtx = myCanvas.getContext('2d');
myCanvas.addEventListener("mousedown", __downMouse, false);
myCanvas.addEventListener("mouseup", __upMouse, false);
}
function stopLine() {
myCanvas.removeEventListener("mousedown", __downMouse, false);
myCanvas.removeEventListener("mouseup", __upMouse, false);
}
function __downMouse(e) { // 콜백 함수
startx = e.offsetX;
starty = e.offsetY;
}
function __upMouse(e) {
endx = e.offsetX;
endy = e.offsetY;
myCtx.beginPath();
myCtx.strokeStyle = 'red';
myCtx.lineWidth = 10;
myCtx.moveTo(startx, starty);
myCtx.lineTo(endx, endy);
myCtx.stroke();
myCtx.closePath();
}
</script>
</head>
<body>
<input type='button' value='선그리기 시작' id='btnLine' onclick="drawLine()" />
<input type='button' value='선그리기 끝!' id='btnLineEnd' onclick="stopLine()" />
<input type='button' value='박스 그리기 시작!' id='btnBox' onclick="boxLine()" />
<input type='button' value='박스 그리기 끝!' id='btnBoxEnd' onclick="boxStopLine()" />
<br>
<canvas id='myCanvas' style="background-color: bisque;" width=500 height=500>
</canvas>
</body>
</html>