javascript - 为什么画布上的矩形会移位？

Question

我有一个画布，我在移动设备上测试，当我触摸画布的右侧时，矩形向右移动。我向左触摸的次数越多，矩形就越被绘制在它应该在的位置，恰好在触摸的位置。你知道为什么吗？画布的右边部分是窃听器，左边部分是好的。

<canvas id="layerDraw"
style="position: relative; width:100%; height:auto; margin- top:2%; z-index: 2; border:1px solid red;">
</canvas>

function touch(){
ld.addEventListener("touchstart", follow);
ld.addEventListener("touchmove", follow);
}
function follow(evt){
//evt.preventDefault(); 
var ctx = ld.getContext("2d");
var touches = evt.touches;  
ctx.fillStyle = chos; 
var x = touches[0].pageX -getOffsetLeft(ld);
var y = touches[0].pageY -getOffsetTop(ld);
    ctx.fillRect(x-5,y, 20, 20);
}
function getOffsetLeft( elem ) { 
var offsetLeft = 0; 
do { 
    if (!isNaN(elem.offsetLeft)) { 
        offsetLeft += elem.offsetLeft; 
    } 
} while( elem = elem.offsetParent ); 
return offsetLeft; 
}

function getOffsetTop( elem ) { 
var offsetTop = 0; 
do { 
    if (!isNaN(elem.offsetTop)) { 
        offsetTop += elem.offsetTop; 
    } 
} while( elem = elem.offsetParent ); 
return offsetTop; 
}

标签： javascriptcanvastouch