HTML5 - 10.canvas : 마우스로 그리기

티스토리 뷰

Posted by Godffs on 2014. 2. 16. 16:55 in jQuery | javascript | CSS /

마우스 이벤트 중에서
mousedown 상태에서 마우스를 이동하 mouserup 할 때 선을 그리는 예제 입니다.

ex07.sketch.html

<!DOCTYPE html>

<head>

</head>

<body>

var canvas = document.getElementById("can1");

var cv = canvas.getContext("2d");

canvas.onmousedown = function (event) {

var x = event.x;

var y = event.y;

cv.beginPath();

cv.moveTo(x, y);

cv.stroke();

cv.lineWidth = 3;;

}

canvas.onmouseup = function (event) {

var x = event.x;

var y = event.y;

cv.lineTo(x, y);

cv.stroke();

cv.lineWidth = 3;

cv.closePath();

}

</script>

</body>

</html>

결과를 확인합니다. (아래 실제 테스트 가능하도록 했습니다.)
티스토리에 넣으니깐 위치가 이상하네요...;;;

참 쉽죠~? 끝

저작자표시 비영리 변경금지