не могу добавить .onclick к изображению javascript

Я хочу нарисовать копию этого изображения поверх него, но ниже, но .onclick не работает для моего объекта изображения. Я уже протестировал его, и он отлично работает с canvas.onclick, но не с моим изображением «липким».

код ниже:

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

var sticky = new Image();
sticky.src = "sticky.png";
sticky.onload = function() {

    context.drawImage(sticky, 0, 0);
};

sticky.onclick = function() {

    context.drawImage(sticky, 0, 100);
};

</script>

javascript canvas html onclick drawimage
person user3150635    schedule 06.10.2014    source источник
comment
Когда вы рисуете изображение на холсте, это уже не элемент, а пиксели.   -  person elclanrs    schedule 06.10.2014
comment
stackoverflow.com/questions/15331264/   -  person nisargjhaveri    schedule 06.10.2014
comment
это имеет смысл, но как должен выглядеть мой код, если я хочу, чтобы пользователь мог щелкнуть «липкое» изображение и поверх него появилось другое? может ли кто-нибудь привести пример обходного пути для того, что я пытаюсь сделать?   -  person user3150635    schedule 06.10.2014
comment
попробуйте jsfiddle.net/cha16b8y/1   -  person Dart    schedule 06.10.2014

Ответы (1)


arrow_upward
2
arrow_downward

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

И когда холст draw изображение, он дублирует его, копирует пиксели в себя.

Так что добавьте свое изображение в дом и слушайте щелчок на своем холсте.

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext("2d");
var sticky = new Image();
var sticky2 = new Image();

sticky.src = "http://lorempixel.com/250/60/";
sticky2.src = "http://lorempixel.com/150/60/";

sticky.onload = function() {
  context.drawImage(sticky, 0, 0);
};

canvas.onclick = function() {
  context.drawImage(sticky2, 0, 100);
};
<canvas id="myCanvas"></canvas>

person Yoann    schedule 06.10.2014
comment
куда бы я поместил body.appendChild (липкий);? где бы я его ни ставил, все равно не работает... - person user3150635; 06.10.2014
comment
Благодарю вас! теперь код работает, но есть две ошибки. во-первых, под моим холстом есть второе «липкое» изображение, которое появилось только тогда, когда я добавил «липкое» в дом, и я хочу, чтобы оно исчезло. во-вторых, когда я продолжаю щелкать по нему, он постоянно рисует изображения с (0,100)? если нет, то как заставить его делать это до бесконечности? - person user3150635; 06.10.2014
comment
Определите «до бесконечности», вы имеете в виду (0, 100n)? - person Yoann; 06.10.2014
comment
И вам не нужно добавлять свое изображение в дом, если оно вам не нужно. Вам нужно только слушать щелчок по холсту. (Обновил мой ответ) Кроме того, каждый раз нажимайте draw на предыдущем draw. - person Yoann; 06.10.2014