如何在Canvas HTML5中选择图片（对象）

Question

我只想通过单击ball.gif开始该过程。我做不到同样在动画结束时，我的图片也消失了。 这是我的代码；

在“画布”中选择对象并将其添加到事件中。 我看了几乎所有问题。但是我没有找到答案。

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);

更新

OP评论：

  

所以当我单击图片时该怎么做。

在这种情况下，您需要在单击画布时检测鼠标的位置。我添加了一个检测鼠标位置的功能：

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);
}

});