Привет всем! Делаю сайт с рулеткой на HTML5 Canvas и столкнулся с проблемой. Не могу понять как правильно сделать текст кликабельной ссылкой.
Пробовал разные способы, вот один из них:
var textContent = "перейти";
document.write(textContent.link("index.html"));
Похоже что проблема в том, что текст уже находится в переменной, но не уверен. Может кто-то сталкивался с подобным? Буду очень благодарен за помощь и советы!
А ты canvas элемент делаешь кликабельным через addEventListener? Там же нельзя просто HTML ссылки вставить. Нужно координаты клика проверять и если попал в область текста - тогда window.location менять. Какой движок для рулетки используешь?
у меня была похожая задача месяц назад! проблема действительно в том что Canvas это не обычный HTML где можно просто теги вставлять.
я решил так: сначала отрисовываешь текст обычным fillText(), запоминаешь его координаты и размеры. потом добавляешь обработчик mousemove на canvas - когда мышка попадает в область текста, меняешь cursor на pointer.
для клика тоже простая проверка координат и потом window.open() или location.href. главное правильно рассчитать границы текста, можно через measureText() ширину получить.
document.write тут не поможет, это же Canvas элемент. Я обычно делаю так: вешаю событие onclick на весь canvas, потом через getBoundingClientRect() получаю координаты клика относительно канваса. Дальше проверяю попадание в нужную область с текстом и делаю переход через window.location.href = “index.html”. Можно еще курсор менять на pointer когда мышка над ссылкой.