HTML5 проблема холста

Question

Я работаю над сценарием, чтобы сделать несколько вещей.Вкратце, вот что нужно сделать:

1. Считать координаты со страницы и иметь возможность открыть окно в определенном регионе.
2. Нужно всплывающее окночтобы иметь возможность следить за мышью.
3. Мне нужно иметь возможность изменить окно так, чтобы оно выглядело так, как я хочу (я думал, что контейнер div, для которого установлено отображение: скрытый, а затем JS устанавливаетблокировать отображение, когда ваша мышь находится в указанной области).
4. Мне нужно иметь возможность легко изменять его (иначе говоря, добавлять и вычитать объекты и наборы координат)

Я былПервоначально с использованием HTML maps (), и это работало замечательно, пока я не изменил размер моего браузера, и div, который у меня был после мыши, больше не выстраивался корректно.Что-то в смещении не работает правильно, и я не могу заставить его работать правильно, поэтому я переключился на холст HTML.И теперь у меня есть координаты на холсте правильно, я просто не могу понять, как заставить что-то всплывать, когда мышь находится внутри определенного раздела.Вот мой текущий код:

function drawLines(numbers, color){
//poly [x,y, x,y, x,y.....];
var poly=numbers;
context.fillStyle = color;
context.beginPath();
context.moveTo(poly[0], poly[1]);
for( item=2 ; item < poly.length-1 ; item+=2 )
    {context.lineTo( poly[item] , poly[item+1] )};
context.closePath();
context.fill();

}

У меня есть каждая область внутри массива, которую я затем передаю функции по очереди.Цвет был тестом, и я могу легко заставить каждый регион отображаться как определенный цвет, но это не решает мою проблему.Есть идеи?Спасибо!

Answer 1

Кажется странным переходить к холсту из-за проблемы со стилем, но игнорируя это ...

Вы можете привязать события mousemove к элементу canvas, а затем выполнить тесты нажатия в вашем регионе, чтобы увидеть, находится ли мышь внутриобласть.

Эффективное выполнение теста на попадание может быть сложным в зависимости от количества областей, которые вы тестируете, но это определенно выполнимо.

Холст похож на любой другой элемент уровня блока, поэтому применяются те же событияи связаны одинаково.

Вот один из примеров событий мыши, взаимодействующих с холстом.В этом примере события связаны с документом, но применяются аналогичные идеи.

http://dev.opera.com/articles/view/blob-sallad-canvas-tag-and-javascrip/