Question

我在另一个画布里面有一个画布。

  <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上得到了所有错误的画布坐标。有人能说出正确的方法吗？

Answer 1

你的画布是否已滚动？

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

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

}

获取页面上HTML5画布的坐标

1 个答案: