test
류명운
·2016. 2. 25. 06:28
<!DOCTYPE html>
<html>
<head>
<title>aj</title>
<style type="text/css">
body { margin: 0; padding: 0 }
#c { position: absolute; width: 800; height: 600; overflow: hidden }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/ecmascript">
var figure = 0; // 0:펜 1:네모 2:동그라미 3:직선
//--------------------------------------------------------------
$(document).ready(function () {
});
function clickPen() {
figure = 0;
}
//--------------------------------------------------------------
//마우스가 눌렸는지 안눌렷는지 알아야한다.
var mflag = false; //처음은 안눌린 상태.
//캔버스 안에서의 좌표가 필요하다.
//시작
var cbeginX;
var cbeginY;
//끝
var cendX;
var cendY;
//마우스 다운했을때 시작점만 알아준다.
function onDown(event) {
if (mflag == false) {
cbeginX = event.pageX - 0;
cbeginY = event.pageY - 0;
mflag = true;
}
}
//타입에 따라서 마우스를 땐순간 그려준다.
function onUp(event) {
cendX = event.pageX - 0;
cendY = event.pageY - 0;
//alert("begin : " + beginX + "," + endX + "\nend : " + endX + "," + endY);
switch (figure) {
case 0: break; //펜기능은 onmousemove 이벤트를 하기때문에...
case 1: DrawRect(); break;
case 2: DrawCircle(); break;
case 3: DrawLine(); break;
}
mflag = false;
}
//이 함수는 펜기능만한다. 알고리즘 부족해서. 나머지 버그..ㅋㅋ
function onMove(event) {
if (mflag == true && figure == 0) {
var c1 = document.getElementById("c");
var c1_context = c1.getContext("2d");
cendX = event.pageX - 0;
cendY = event.pageY - 0;
c1_context.beginPath();
c1_context.moveTo(cbeginX, cbeginY);
c1_context.lineTo(cendX, cendY);
c1_context.stroke();
cbeginX = cendX;
cbeginY = cendY;
}
}
</script>
</head>
<body>
<canvas id="c" onmousedown="onDown(event)" onmouseup="onUp(event)" onmousemove="onMove(event)">></canvas>
</body>
</html>
'삶의 늪에 들어 가기 전 > 정리중(미정리)' 카테고리의 다른 글
| [Node.js] websocket 모듈을 통한 에코 서버 구축하기 (0) | 2016.02.26 |
|---|---|
| [Node.js] node.js 서버 구축하기 (0) | 2016.02.26 |
| [프로젝트, 4학년] 성서대 버정 (0) | 2016.01.22 |
| [Maven] 라이브러리 추가하는 법 (2) | 2016.01.21 |
| [프로젝트, 3학년] ATMSim (0) | 2016.01.14 |
