我有一個帶有<canvas>
元素的HTML文件,我正在嘗試獲取click
事件中的鼠標座標。我使用此代碼:HTML5畫布鼠標座標
secondCanvas.addEventListener('click', function(e) {
console.log(e.pageX)
}, false);
當我點擊左上角點我在控制檯500弄〜數量,而不是零...什麼,我需要做的就是在畫布上鼠標的座標?
我有一個帶有<canvas>
元素的HTML文件,我正在嘗試獲取click
事件中的鼠標座標。我使用此代碼:HTML5畫布鼠標座標
secondCanvas.addEventListener('click', function(e) {
console.log(e.pageX)
}, false);
當我點擊左上角點我在控制檯500弄〜數量,而不是零...什麼,我需要做的就是在畫布上鼠標的座標?
這是因爲你正在獲取頁面座標。我猜你想在你的兩個畫布中的任何一個畫布中放置當前的鼠標位置?希望這將解決您的問題:
http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
而且這個計算器與你相似,並可能給你一個更好的理解: Tracking mouse position in canvas when no surrounding element exists
function findPos(obj) {
var curleft = 0, curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return { x: curleft, y: curtop };
}
return undefined;
}
$('#canvas').mousemove(function(e) {
var pos = findPos(this);
var x = e.pageX - pos.x;
var y = e.pageY - pos.y;
var coordinateDisplay = "x=" + x + ", y=" + y;
writeCoordinateDisplay(coordinateDisplay);
});
你應通過減去事件偏移(e.pageX
和e.pageY
)的畫布元素偏移來計算畫布鼠標位置。
這裏有一個link解釋如何獲取DOM元素的位置,代碼應該是這樣的:
secondCanvas.addEventListener('click', function(e) {
var pos = {
x : e.pageX - canvasOffsetX,
y : e.pageY - canvasOffsetY
};
console.log(pos.x)
}, false);
我使用此代碼和它的作品完美的我。一旦添加,畫布鼠標事件就有兩個新屬性:canvasX和canvasY,它們被正確映射。在獲得canvas元素之後,不要忘記調用canvas.extendMouseEvents()並開始工作。
HTMLCanvasElement.prototype.extendMouseEvents = function() {
this.mapMouseEvent = function(ev) {
var r = this.getBoundingClientRect();
ev.canvasX = ev.pageX - r.left;
ev.canvasY = ev.pageY - r.top;
};
this.addEventListener("mousemove", this.mapMouseEvent);
this.addEventListener("click", this.mapMouseEvent);
this.addEventListener("contextmenu", this.mapMouseEvent);
this.addEventListener("dblclick", this.mapMouseEvent);
this.addEventListener("mousedown", this.mapMouseEvent);
this.addEventListener("mouseenter", this.mapMouseEvent);
this.addEventListener("mouseleave", this.mapMouseEvent);
this.addEventListener("mouseover", this.mapMouseEvent);
this.addEventListener("mouseout", this.mapMouseEvent);
this.addEventListener("mouseup", this.mapMouseEvent);
}
我修復處理直接與畫布本身,而不觸及上下文。 –
+1爲了得到彌補,除非你需要支持舊的瀏覽器,我建議使用'element.getBoundingClientRect();'返回頂部與底部的對象左,右屬性 – UpTheCreek