Блог

Главная - Вопросы по программированию - Получение координат холста HTML5 на странице

Получение координат холста HTML5 на странице

#javascript #html #canvas

#javascript #HTML #холст

Вопрос:

У меня есть холст внутри другого холста.

   <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.
Может кто-нибудь показать правильный путь?

Комментарии:

1. Какие координаты вы ожидаете, когда нажимаете на верхний левый, верхний правый, нижний левый и нижний правый углы холста?

2.(0,0), (1316,0), (0,718),(1316,718)

Ответ №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);

}