Я пытаюсь добавить eventlister к картинке, поэтому после нажатия на нее меня переводит на другую страницу, на данный момент у меня она выводит меня на следующую страницу, но не тогда, когда я нажимаю на картинку, но когда я нажимаю где-нибудь на холстеCanvas addeventlistener click image
Реагирование на холст клик
Нам, похоже, ваш вопрос был отрезан! На ваш следующий вопрос, не забудьте нажать клавишу «Ввод», вместо того, чтобы начинать новую строку в своем вопросе, вы немедленно опубликуете свой частично написанный вопрос (не волнуйтесь ... мы все это сделали).
И Ник, «Добро пожаловать в stackoverflow» - на нем полно ответов!
Norguard прав насчет того, что холст не может отслеживать, на какое изображение вы нажали. Подумайте о холсте как мольберте художника, и вы рисуете изображения на этом мольберте. Да, мольберт содержит изображения, но мольберт не знает, где вы нарисовали изображение.
Чтобы ваша жизнь была простой, пока вы учитесь, попробуйте начать с наличия всего одного изображения на холст (да, вы можете иметь столько элементов холста, сколько у вас есть изображения).
Если вы хотите начать с 1 изображение на холсте, вот код и Fiddle: http://jsfiddle.net/m1erickson/KGKYg/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=function(){
canvas.width=img.width;
canvas.height=img.height;
ctx.drawImage(img,0,0);
}
img.src="http://dl.dropbox.com/u/139992952/coffee.png";
canvas.addEventListener("click", function (e) { alert("use your linke totake me away...!"); });
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
[Edit: В ответ на клавишных событий]
Вот как вы можете слушать нажав на клавиши и ответьте на них:
// listen for keyboard events
window.addEventListener('keydown',keyIsDown,true);
// process the keystrokes
function keyIsDown(event){
switch (event.keyCode) {
case 38:
// "UP" was pressed, do UP stuff
break;
case 40:
// "DOWN" was pressed, do DOWN stuff
break;
}
}
Ах, похоже, мой вопрос действительно обрезался: P спасибо за ответ, проблема у меня в том, что в его меню в игре так нужны 2/3 «ссылки» для игрового магазина и т. Д. Возможно ли это использовать стрелки вверх и вниз или это будет сложнее? – Nick
Не сложно - см. Мой отредактированный ответ выше. Использовать ли нажатия клавиш для управления меню - это ваше дизайнерское решение, но это не сложно. ;) – markE
Вы не можете сделать это просто, и нет слушателя событий, который позволит вам.
1) слушать щелчок на холсте
2) сохранить ссылку на объект изображения, который вы нарисовали ... ... как, знают свои координаты холста, сохраняя ссылку на отдельном объекте:
var canvas_img = {
x : 250,
y : 300,
data : my_img,
width : my_img.width,
height : my_img.height
};
3) щелкнув по холсту, вручную вычислите, произошло ли столкновение между тем, где произошло щелчок на холсте, и где изображение находится на холсте.
Показать код. Пример [JSFiddle] (http://jsfiddle.net/), показывающий проблему, был бы полезен, но не требовался – musefan
Я бы не назвал смутное предположение талантом. Кодирование, не зная всех фактов и предлагая ответы, не зная источника проблемы, является крайне неприятной чертой. Но непременно живи своей жизнью. – AlienWebguy