Javascript Canvas Изображение onclick не работает

Я не могу получить изображение DOM Image onclick для работы.Javascript Canvas Изображение onclick не работает

var context = document.getElementById('canvas').getContext('2d'); 

var image = new Image(); 
image.src = "foo.png" 
image.onclick = function(e) { console.log("clicked"); } 


setInterval(function() { 

context.drawImage(image, 100, 100, 50, 50);  

};

Почему я не получаю сообщение журнала, когда я нажимаю на изображение. В инструментах разработчика я вижу, что функция onclick не равна нулю для изображения.

источник

2013-03-11 user2155429

Как именно вы нажимаете на это изображение, вы даже не добавляли его в документ. – Musa

Да, что сказал Муса ... и еще несколько вещей.

Некоторые изменения кода

Image.src =»foo.png» должен прийти после того, как функции image.onclick
Context.drawImage должен быть внутри функции image.onclick
setInterval не нужен, насколько я могу видеть

Попробуйте это:

<!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 context=document.getElementById("canvas").getContext("2d"); 

    var image=new Image(); 
    image.onload=function(){ 
     context.drawImage(image,0,0); 
    } 
    image.src="http://i.imgur.com/nJiIJIJ.png"; 

    document.getElementById("canvas").addEventListener("click", function(){console.log("clicked");}, false); 


}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

источник

2013-03-11 04:51:26 markE

Вы не можете установить onclick для определенного изображения, добавленного в холст. Вы можете установить onclick для всего холста, так что вам придется использовать любые сторонние js, иначе вы должны сделать некоторые вычисления, которые обнаруживают, что вы нажали на изображение холста.

источник

2013-03-11 05:07:23

Я не думаю, что это правильно, опять же, я могу ошибаться, есть ли у вас какие-либо ссылки, которые поддерживают ваш ответ? –

http://stackoverflow.com/questions/11172087/canvas-images-and-click-event .. У ВАС ВЗГЛЯД НА –

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

Другие пользователи правы.

Изображение, которое вы рисуете на холсте, является элементом DOM, но оно отображается в позиции, которая не хранится в DOM.

Это не значит, что вы можете получить доступ к его положению и сравнить его с положением мыши.

Я использую внешнюю библиотеку здесь, но это то, что вам нужно: http://jsfiddle.net/Saturnix/cygUH/

this это библиотека используется.

Поскольку я не могу отправить ссылку на jsfiddles без размещения кода, вот сценарий, который я написал для вас.

function demo(g) { 
    g.ctx.font = "bold 16px Arial"; 

    g.draw = function() { 
     g.ctx.clearRect(0, 0, g.width, g.height) 

     var posX = 0; 
     var posY = 0; 
     g.ctx.drawImage(image, posX, posY); 

     if (g.mouseX > posX && g.mouseX < image.width && 
      g.mouseY > posY && g.mouseY < image.height && 
      g.mousePressed) 
     g.ctx.fillText("You're clicking the image!", g.mouseX, g.mouseY); 

    } 
}

источник

2013-03-11 14:47:39 Saturnix

Вы можете бросить луч (с OnClick на холсте) в холст и вручную проверить свои изображения для пересечения с лучом. Вы должны написать функцию

objectsUnderPoint(x, y);

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

Как обычно это делается в 3D-двигателях. Вы, конечно же, должны сохранить позицию изображения как свойство изображения для тестирования пересечения.

источник

2014-07-23 18:09:35 David

Javascript Canvas Изображение onclick не работает

ответ

Смежные вопросы