畫布jquery的移動

Question

偏移我已成立這裏筆

http://codepen.io/prantikv/pen/LEbRKY

我使用的是向帆布行程鼠標或觸摸。它工作正常時jquery或jQuery的手機沒有附加，但只要我附加它我得到一個偏移量在畫布和繪圖只在Y軸。

我用下面的代碼來繪製：

var el = document.getElementById('c'); 
var ctx = el.getContext('2d'); 
var isDrawing; 

el.onmousedown = function(e) { 
    isDrawing = true; 
    ctx.lineWidth = 10; 
    ctx.lineJoin = ctx.lineCap = 'round'; 
    ctx.moveTo(e.clientX, e.clientY); 
    console.log(e.clientX, e.clientY); 

    console.log(e); 
    console.log(e.pageX,e.pageY); 
}; 
el.onmousemove = function(e) { 
    if (isDrawing) { 
    ctx.lineTo(e.layerX, e.layerY); 
    ctx.stroke(); 
    } 
}; 
el.onmouseup = function() { 
    isDrawing = false; 
}; 

似乎是這個問題。我嘗試使用layerY和pageY和screenY但非準確。

我應該採取哪些值？

Answer 1

下面是解

var el = document.getElementById('c'); 
var jqEl = jQuery('#c') 
var ctx = el.getContext('2d'); 
var isDrawing; 
el.onmousedown = function(e) { 
    isDrawing = true; 
    ctx.lineWidth = 10; 
    ctx.lineJoin = ctx.lineCap = 'round'; 
    ctx.moveTo(e.clientX - jqEl.position().left, e.clientY - jqEl.position().top); 
}; 
el.onmousemove = function(e) { 
    if (isDrawing) { 
    ctx.lineTo(e.clientX - jqEl.position().left, e.clientY - jqEl.position().top); 
    ctx.stroke(); 
    } 
}; 
el.onmouseup = function() { 
    isDrawing = false; 
};