获取页面上 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 上得到了所有错误的画布坐标。 有人可以展示正确的方法吗？

你的画布已经滚动了吗？

如果是，那么您还需要考虑画布在浏览器中滚动的距离。

您可以查看 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);

}