Превращение HTML5-элемента canvas в ссылку

Question

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

Я пробовал очевидную вещь - обертывание элементав элементе A - но поиск проблем в IE9.

Возьмем эту разметку, например:

<a href="#link">
  <canvas width="100" height="100">
    //fallback
  </canvas>
</a>

Используя CSS, я стилизовал цвет фона ссылки, чтобы изменить его при наведении, и нахожу вв большинстве современных холстов, поддерживающих браузеры, он работает должным образом - вы зависаете, фон меняет цвет, вы щелкаете ссылку, ссылка идет.

Однако в IE9 при наведении курсора на элемент он не распознает, что онссылка - без эффекта наведения, курсор не меняется на указатель, щелчок не выполняется.

Интересно, если я добавлю 1-пиксельную границу к элементу A и ненадолго наведу указатель мыши на 1-пиксельную границу, IE9распознает ссылку, и после этого вы можете навести курсор мыши на холст, и он сохраняет свое состояние при наведении и работает как ссылка.

Этопочти как если холст переопределяет ссылку, поэтому браузер не может распознать ссылку, только элемент canvas - если это имеет смысл?

Итак, на самом деле я просто хочу выяснить:

• Допустимо ли просто обернуть элемент Canvas в элемент A - это просто странный IE9 или я делаю это неправильно?
• Если я делаю это неправильно, чтопринятый метод для выполнения этого, казалось бы, простого задания?

Спасибо

ОБНОВЛЕНИЕ

Хорошо, поэтому приведенный ниже ответ все верны, но, к сожалению, не былит работает в моей реализации либо.Моя разметка намного сложнее, чем приведенный выше упрощенный пример, поэтому я предполагаю, что на самом деле есть что-то еще, что вызывает проблему - с родными событиями наведения и событиями, связанными с JavaScript - ничего не работало.

Однако я придумал хак, который решил проблему.Я дал моей ссылке цвет фона RGBA с нулевой непрозрачностью.Как только это было, все работает хорошо.Странно, я знаю, но исправлено:)

Answer 1

Я не на 100% из-за проблем с элементом canvas в IE, но вы можете обновить обработчик onclick элемента canvas, изменив расположение окна на нужное вам место.

document.getElementById("mycanvas").onclick = function(e){
    window.location.href = 'http://www.google.com';
};

Пример: http://jsfiddle.net/jonathon/HtmVS/

Вы можете обрабатывать другие события (например, mousein / mouseout), чтобы установить курсор, если хотите.

Answer 2

Вы можете использовать javascript onclick, чтобы справиться с этим, и объединить его с CSS, чтобы добавить cursor: pointer;. Затем вы можете реализовать canvas:hover в CSS для эффектов наведения. Вы можете комбинировать это с <a>, чтобы позволить пользователю «переходить» через ссылки / полотна.

Answer 3

Не уверен, что вы хотите использовать jQuery, но если это так, попробуйте это.

$("#myCanvasId").click(function(){
window.open("https://www.google.com");
});

Answer 4

Кросс-браузерный способ сделать это, просто поместив div поверх холста, который имеет точно такое же положение пикселей, ширину и высоту, что и холст.Затем установите обработчик щелчка на этом элементе div и используйте window.location.href, как предложено в предыдущем ответе.

...
<canvas id=".. >
<div id="overlay"/>
...