Кнопка изображения все еще работает после очистки от холста

Question

Я использую изображение и превращаю его в объект Button, который при нажатии должен исчезнуть и быть неактивным, пока он не будет вызван снова. Я нажимаю кнопку, и изображение исчезает, но область, над которой было изображение, все еще активна, как если бы кнопка все еще была там (то есть, если я щелкаю область, в которой находилась кнопка, код, который был вызван кнопкой, вызывается опять же).

Вот код кнопки, которую нужно нарисовать из draw ()

ctx.beginPath();    
    img=document.getElementById('btn');    
    btn=new Button(img, (420-img.width/2), (280-img.height/2),  img.width, img.height);    
    btn.draw(ctx);    
ctx.closePath();    

Вот ничья из Баттона класса

Button.prototype.draw=function(ctx){    
    ctx.beginPath();    
         ctx.drawImage(this.image, this.x, this.y, this.width, this.height);    
    ctx.closePath();     
};

А вот код, который прослушивает и обрабатывает нажатую кнопку

Из HTML-файла

function mousePressed(inputEvent){        
    if(btn.clicked(inputEvent)){    
        start=Date.now();    
        score=0;    
        update();    
    }   
}

Из класса кнопок

  Button.prototype.clicked=function(inputEvent){    
      var clickX=inputEvent.clientX;
      var clickY=inputEvent.clientY;
      return (clickX>=this.x && clickX<=(this.x+this.width) && clickY>=this.y && clickY<=this.y+this.height);
   }; 

Answer 1

Учитывая, что на холсте HTML на самом деле нет объектов, как с HTML-элементами DOM, такими как div, изображения, кнопки и т. Д., Событие mousePressed, вероятно, вызывается onClick из canvas, что означает if (btn.clicked ( inputEvent)) код все еще будет работать и проверять, был ли щелчок внутри ширины и высоты кнопки.

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

function mousePressed(inputEvent){        
    // If button enabled and clicked then udpate
    if(btn.enabled && btn.clicked(inputEvent)){
        start=Date.now();    
        score=0;    
        update();    
    }   
}

В конструкторе кнопки set enabled = true, а затем в коде, который заставляет кнопку «исчезнуть», установите button.enabled в false. На самом деле, у вас уже может быть свойство для управления, если оно нарисовано или нет, вы можете использовать его для контроля, нужно ли проверять щелчок?