<body onload="init()">
<h3>마우스를 누른 채 드래깅하여 그림 그려 보세요</h3>
<hr>
<canvas id="myCanvas" style="background-color:aliceblue" width="400" height="300">
</canvas>
<!-- 자바스크립트 코드 -->
</body>
var canvas, context;
function init() {
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
context.lineWidth = 2; // 선 굵기를 2로 설정
context.strokeStyle = "blue";
/* 마우스 리스너 등록. e는 MouseEvent 객체 */
canvas.addEventListener("mousemove", function (e) { move(e) }, false);
// 마우스 움직이는 동안
canvas.addEventListener("mousedown", function (e) { down(e) }, false);
// 마우스가 눌러질 때
canvas.addEventListener("mouseup", function (e) { up(e) }, false);
// 마우스가 놓여질 때
canvas.addEventListener("mouseout", function (e) { out(e) }, false);
// 마우스가 캔버스 영역을 벗어날 때
}
var startX=0, startY=0; // 마우스의 포인터 좌표
var drawing=false; // 드래깅을 통해 그림이 그려질 상태 = false
function draw(curX, curY) {
context.beginPath();
context.moveTo(startX, startY);
context.lineTo(curX, curY);
context.stroke();
}
function move(e) {
if(!drawing) return; // 마우스가 눌러지지 않았으면 리턴
var curX = e.offsetX, curY = e.offsetY; // 마우스가 눌려진 위치 저장
draw(curX, curY);
startX = curX; startY = curY; // 현재 마우스 위치로 변경
}
function down(e) {
startX = e.offsetX; startY = e.offsetY; // 마우스가 눌려진 위치에서 시작
drawing = true; // 드래깅을 통해 그림이 그려질 상태 = true
}
function up(e) { drawing = false; }
function out(e) { drawing = false; }