<body>
<canvas id="canvas" width="800" height="1400" style="border: 3px solid black"></canvas>
</body>
[removed]http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
var ismousedown = 0;
$(document).ready(function(){
//변수를 선언해요.
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//다음으로 이벤트를 연결해요.
$(canvas).on({
mousedown: function(event){
ismousedown = 1;
//마우스의 위치를 얻어내요.
var position = $(this).offset();
var x = event.pageX - position.left;
var y = event.pageY - position.top;
//다음 선을 그려요.
context.beginPath();
context.moveTo(x,y);
},
mouseup: function(event){
ismousedown = 0;
//마우스 위치를 얻어내요.
var position = $(this).offset();
var x = event.pageX - position.left;
var y = event.pageY - position.top;
//선을 그려요.
//context.lineTo(x,y);
//context.stroke();
},
mousemove: function(event){
if(ismousedown==1){
//마우스 위치를 얻어내요.
var position = $(this).offset();
var x = event.pageX - position.left;
var y = event.pageY - position.top;
//선을 그려요.
context.lineTo(x,y);
context.stroke();
}// 마우스 다운 일 때만 그림을 그림
}
});
});
</script>
저기에서 ismousedown 만 내가 추가했는데요. 그림판 만드는게 안드로이드 apk 보다도 더 쉽네잉 . 안드는 빨리 사장되었으면 함. 너무 어려움
캔버스 api로 그리는거 존나 원시적인 방법이라서 좆같은데
sketch.js
Paper.js
제이쿼리없으면 개발못하냐?
sketch.js.. Paper.js 햐.. 좋은 세상이다