Javascript 帆布清算卡

当我点击一个卡片元素时，我希望它清除画布并重新绘制除点击的卡片以外的所有内容

问题是，点击某些位置可以清除多张卡，我不知道如何修复它。我一直在试图修复它，但到目前为止还没有成功

let elem = document.getElementById("canvas"),
ctx = elem.getContext("2d"),
elemLeft = elem.offsetLeft,
elemTop = elem.offsetTop;
let drawHelper = {
   pintarImagenes: function() {
         imagenes.forEach(function(image){
           drawHelper.pintarImagen(image);
         });
   },
   pintarImagen: function(image) {
     ctx.save();
     ctx.drawImage(image.image, image.x, image.y);
     ctx.clip();
     ctx.restore();
   }
};
let distancias =[30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330, 360, 390, 410, 440, 470, 510, 540, 570, 600, 630, 660, 690, 720, 750, 780, 810, 840, 870, 900];
let imagenes = [];
for ( let i = 0; i < 22; i++) {
  imagenes.push({
    x: (30*i),
    x1:((30*i)+270),
    y: 20,
    y1: 545,
    image: new Image()
  });
  imagenes[i].image.src = 'image.png';
  imagenes[i].image.onload = drawHelper.pintarImagenes;
}
elem.addEventListener('click', function onClickCanvas(event){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
      let i = 0;
      let newImagesArray = [];
      imagenes.forEach(function(image = distancias[i]){
        if( image.x <= event.clientX
          && image.y <= event.clientY
          && image.x1 >= event.clientX
          && image.y1 >= event.clientY){
            console.log(i);
          } else {
            newImagesArray.push(image);
          }
          i++;
        });
        imagenes = newImagesArray;
        drawHelper.pintarImagenes();
      });

let elem=document.getElementById（“画布”），
ctx=elem.getContext（“2d”），
elemLeft=elem.offsetLeft，
elemTop=elem.offsetTop；
让drawHelper={
pintarImagenes:function（）{
imagenes.forEach（函数（图像）{
drawHelper.pintarImagen（图像）；
});
},
pintarImagen：函数（图像）{
ctx.save（）；
ctx.drawImage（image.image，image.x，image.y）；
ctx.clip（）；
ctx.restore（）；
}
};
设距离=[30,60,90,120,150,180,210,240,270,300,330,360,390,410,440,470,510,540,570,600,630,660,690,720,750,780,810,840,870,900]；
设imagenes=[]；
for（设i=0；i<22；i++）{
推({
x:（30*i），
x1:（（30*i）+270），
y:20，
y1:545，
图像：新图像（）
});
imagenes[i].image.src='image.png'；
imagenes[i].image.onload=drawHelper.pintarImagenes；
}
元素addEventListener（'click'，函数onClickCanvas（事件）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
设i=0；
让newImagesArray=[]；
forEach（函数（image=distance[i]）{
if（image.x=event.clientY）{
控制台日志（i）；
}否则{
newImagesArray.push（图像）；
}
i++；
});
imagenes=新的ImageSarray；
drawHelper.pintarImagenes（）；
});

代码笔：

一些问题：

• 图像宽度大于270，因此将

  x1:（（30*i）+270）

  更改为

  x1:（（30*i）+340）

• clientX

  和

  clientY

  给出的光标位置与

  canvas

  元素无关，因此请使用

  event.clientX-elem.offsetLeft

  和

  event.clientY-elem.offsetTop

  获得右侧的x，y坐标

• 由于你有重叠的牌，你的条件通常会匹配多张牌。实际上，您只希望匹配这些候选对象中最右边的一个，因为重叠是从左到右发生的，这也是

  imagenes

  数组的顺序。由于您最多只需要一个匹配项，因此可以更好地使用

  findIndex

  而不是

  forEach

  ：找到光标X坐标之后的第一张卡，然后移除该卡之前的卡

以下是处理后两点的正确代码：

elem.addEventListener('click', function onClickCanvas(event){
    let x = event.clientX - elem.offsetLeft;
    let y = event.clientY - elem.offsetTop;
    let i = imagenes.findIndex(image => image.x > event.clientX);
    if (i == -1) i = imagenes.length;
    i--;
    if (i >= 0) {
        let image = imagenes[i];
        if (image.x <= x && image.y <= y && image.x1 >= x && image.y1 >= y) {
           imagenes.splice(i, 1);
        }
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        drawHelper.pintarImagenes();
    }
});

elem.addEventListener（'click'，函数onClickCanvas（事件）{
设x=event.clientX-elem.offsetLeft；
设y=event.clientY-elem.offsetTop；
设i=imagenes.findIndex（image=>image.x>event.clientX）；
如果（i==-1）i=imagenes.length；
我--；
如果（i>=0）{
设image=imagenes[i]；
if（image.x=y）{
拼接（i，1）；
}
clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
drawHelper.pintarImagenes（）；
}
});