Как выбрать картинку (Объект) в Canvas HTML5

Question

Я просто хочу начать процесс, нажав на ball.gif.Я не мог этого сделать.Также в конце анимации моя картинка исчезает.Вот мои коды;

Выберите объект в Canvas и добавьте его в событие.Я посмотрел почти на все вопросы.Но я не нашел ответа.

var player, mouse;
var iterations = 0;


var game = {
    canvas: document.createElement("canvas"),
    start: function () {

        game.canvas.width = 357;
        game.canvas.height = 500;
        game.canvas.style.border = "1px solid red";
        game.ctx = game.canvas.getContext("2d");
        document.body.appendChild(game.canvas);
        player=new game.nesne(150,400,50,50);

        game.canvas.addEventListener("mousedown", function(event) {
            game.nesne(150,400,50,50);
        });

        game.timer = setInterval(game.animate.bind(this), 30);
    },
    draw: function () {

        player.draw();
    },
    update: function () {
    },
    nesne: function (x, y, w, h) {

        this.x = x;
        this.y = y; 
        this.w = w; 
        this.h = h; 

        this.image=new Image();
        this.image.src="ball.gif";
        this.vx = 1; 
        this.vy = -1; 
        this.draw = function () {

          game.ctx.drawImage(this.image,this.x,this.y,this.w,this.h);


        }


        this.update = function () {
            this.x += this.vx; 
            this.y += this.vy; 

        }
    },

    animate: function () {
        game.ctx.clearRect(0,0,game.canvas.width,game.canvas.height);

        iterations++
    if (iterations >= 100)
        clearInterval(interval);
        game.update(); 
        game.draw(); 

    },
}
window.addEventListener("load", game.start, false);

Answer 1

Изменения, которые я сделал:

1. вместо clearInterval(interval); Я использую clearInterval(game.timer); interval не определено.Вы должны использовать обработчик, который вы создали для setInterval (строка 24 в моем коде)

2. Вы вызываете функцию game.update, но в вашем коде пустая функция.Я изменил это.Теперь game.update() вызывает player.update().

3. Чтобы снова оживить игрока на mousedown, вам необходимо сбросить iterations = 0;

var player, mouse;
var iterations = 0;


var game = {
    canvas: document.createElement("canvas"),
    start: function () {

        game.canvas.width = 357;
        game.canvas.height = 500;
        game.canvas.style.border = "1px solid red";
        game.ctx = game.canvas.getContext("2d");
      
      
        document.body.appendChild(game.canvas);
      
        player=new game.nesne(150,400,50,50);
        

        game.canvas.addEventListener("mousedown", 
       function(event) {
      
          if (game.timer) clearInterval(game.timer);
          game.nesne(150, 400, 50, 50);
          iterations = 0;
          game.timer = setInterval(game.animate.bind(this), 30);

         
        });

        game.timer = setInterval(game.animate.bind(this), 30);
    },
  
  
    draw: function () {
        player.draw();
    },
  
    update: function () {
      player.update();///////////////
    },
  
  
    nesne: function (x, y, w, h) {

        this.x = x;
        this.y = y; 
        this.w = w; 
        this.h = h; 

        this.image=new Image();
        this.image.src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/puppy150x150.jpg";
        this.vx = 1; 
        this.vy = -1; 
        this.draw = function () {

          game.ctx.drawImage(this.image,this.x,this.y,this.w,this.h);


        }


        this.update = function () {
            this.x += this.vx; 
            this.y += this.vy; 

        }
    },

    animate: function () {
        game.ctx.clearRect(0,0,game.canvas.width,game.canvas.height);

        iterations++
    if (iterations >= 100)
        //clearInterval(interval);
        clearInterval(game.timer);
        game.update(); 
        game.draw(); 

    }
}

window.addEventListener("load", game.start, false);

ОБНОВЛЕНИЕ

ОП прокомментировал:

Так как мне это сделать, когда я просто нажимаю на картинку.

В этом случае вам нужно определить положение мыши при нажатии на холст.Я добавил функцию для определения положения мыши:

function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
    return {
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
}
}

Далее вам нужно изменить функцию для mousedown.Вам необходимо использовать метод isPointInPath , чтобы проверить, находится ли мышь внутри nesne.

function(event) {
mouse = oMousePos(game.canvas, event);

game.ctx.beginPath();
game.ctx.rect(player.x,player.y,player.w,player.h);
if (game.ctx.isPointInPath(mouse.x, mouse.y)) {


if (game.timer) clearInterval(game.timer);
game.nesne(150, 400, 50, 50);
iterations = 0;
game.timer = setInterval(game.animate.bind(this), 30);
}

});