獲取頁面上HTML5畫布的座標

我在另一個畫布內有一個畫布。獲取頁面上HTML5畫布的座標

<canvas id ='canvas2' height="718" width="1316"></canvas>

它的CSS的東西

#canvas2{ 
position:absolute; 
width :95%; 
height:90%; 
top:5%; 
left:2.5%; 
background: #ffff56; 
cursor:pointer; 

}

未來

我得出一些關於它的矩形。我需要用鼠標點擊顏色。我使用了一個動作監聽器。

var canvas = document.getElementById("canvas2"); 
var ctx = canvas.getContext("2d"); 
canvas.addEventListener("mousedown", doMouseDown, false); 
var $canvas = $("#canvas2"); 
var canvasOffset = $canvas.offset(); 
var offsetX = canvasOffset.left; 
var offsetY = canvasOffset.top; 
function doMouseDown(event){ 
event.preventDefault(); 
event.stopPropagation(); 
var x= parseInt(event.clientX - offsetX); 
var y = parseInt(event.clientY - offsetY); 
}

但這不是我知道的正確方法，因爲我在x和y上得到了所有錯誤的畫布座標。有人可以展示正確的方式嗎？

來源

2014-06-16 user3722844

座標是什麼，當你點擊左上，topRight，BOTTOMLEFT你期待和bottomRight畫布的角落？ –

（0,0），（1316,0），（0,718），（1316,718） – user3722844

您的畫布是否滾動？

如果是，那麼您還需要考慮畫布在瀏覽器中滾動的距離。

你可以看看canvas.getBoundingClientRect（）作爲一種方式來獲得與滾動畫布位置佔：

function handleMousemove(e){ 

    e.preventDefault(); 
    e.stopPropagation(); 

    // if the canvas is stationary (not scrolling) then you can do 
    // .getBoundingClientRect once at the start of the app 

    var BB=canvas.getBoundingClientRect(); 

    // calc mouse position based on the bounding box 

    var mouseX=parseInt(e.clientX-BB.left); 
    var mouseY=parseInt(e.clientY-BB.top); 

    console.log(mouseX+"/"+mouseY); 

}

來源

2014-06-16 16:41:11 markE

獲取頁面上HTML5畫布的座標

回答

相關問題