웹에서 그림판 처럼 터치로 그림을 그릴수 있는걸 구현하려 하는데


touchmove 이벤트 호출주기가 너무 짧아서 


너무 빠르게 그리면 각이져서 그려지더라고요..


아이폰도 약간 그러지만 그나마 안드로이드보단 빠르던데..


뭔가 이 호출 주기를 줄여줄 수 있는 방법이 있을까요?


자바스크립트 소스는 아래와 같습니다..




canvas = document.getElementById("testCanvas");

context = canvas.getContext("2d");

context.lineWidth=5;

context.lineCap="round";

context.fillStyle="white";

context.strokeStyle="black";

canvas.addEventListener("touchstart", function(e){

e.preventDefault();

var p = e.touches[0];

var touchX = p.pageX - canvas.getBoundingClientRect().left;

var touchY = p.pageY - canvas.getBoundingClientRect().top;

console.log("start - X:" + touchX+" , Y:" + touchY);

context.beginPath();

context.arc(touchX, touchY, context.lineWidth/2, 0, Math.PI*2, true);

context.fill();

context.beginPath();

context.moveTo(touchX, touchY);

drawing = true;

},false);

canvas.addEventListener("touchmove", function(e){

e.preventDefault();

draw(e);

}, false);

canvas.addEventListener("touchend", function(e){

e.preventDefault();

context.stroke();

}, false);

function getTouchPoint(event){

var p = event.touches[0];

return{

x:event.clientX - p.pageX,

y:event.clientY - p.pageX,

}

}

function draw(e){

var p = e.touches[0];

var touchX = p.pageX - canvas.getBoundingClientRect().left;

var touchY = p.pageY - canvas.getBoundingClientRect().top;

console.log("move- X:" + touchX+" , Y:" + touchY);

context.lineTo(touchX,touchY);

context.stroke();

context.beginPath();

context.moveTo(touchX,touchY);

}

이 게시물을