试图删除由java脚本中的soltar生成的图像

Question

我有这种情况。 我想在画布上做一个简单的拖放游戏。 所以问题是，我不能删除图像或在完成删除后隐藏可见性tp。

function iniciar() { 

    origen = document.querySelectorAll('#barra > img'); 
    for(var i=0; i<origen.length; i++) { 
     origen[i].addEventListener('dragstart', arrastrar); 
     origen[i].addEventListener('dragend', finalizado); 
    } 

    origenDos = document.getElementById("lienzo"); 
    for(var i=0; i<origenDos.length; i++) { 
     origenDos[i].addEventListener('dragstart', arrastrar); 
     origenDos[i].addEventListener('dragend', finalizado); 
    } 

    destino = document.getElementById("lienzo"); 

    destino.addEventListener('dragenter', entrando); 
    destino.addEventListener('dragleave', saliendo); 
    destino.addEventListener('dragover', function(e){e.preventDefault();}); 
    destino.addEventListener('drop', soltar); 

    miLienzo = destino.getContext('2d'); 

    var imagen=new Image(); 
    imagen.src="imagenes/zombie1.png"; 
    miLienzo.drawImage(imagen, 0, 0); 

    miLienzo.beginPath(); 
    miLienzo.arc(440,330,50,Math.PI*2,false); 
    miLienzo.stroke(); 
    miLienzo.beginPath(); 
    miLienzo.arc(190,360,75,Math.PI*2,false); 
    miLienzo.stroke(); 
    miLienzo.beginPath(); 
    miLienzo.arc(330,260,75,Math.PI*2,false); 
    miLienzo.stroke(); 

} 

function imagenS(e){ 
miImagen=e.target; 
lienzo.drawImage(miImagen,0,0); 

} 



function arrastrar (e) { 
    elemento = e.target; 
    e.dataTransfer.setData('Text',elemento.getAttribute('id')); 
    e.dataTransfer.setDragImage(e.target,32,32); 
} 

function soltar(e){ 

    e.preventDefault(); 
    var id=e.dataTransfer.getData("Text"); 
    var elemento=document.getElementById(id); 

    var posx=e.pageX-destino.offsetLeft-32; 
    var posy=e.pageY-destino.offsetTop-32; 


    if (((((posx+32)-330)*((posx+32)-330) + ((posy+32)-260)*((posy+32)-260)) < 5625) && (elemento.id=="hacha")) { 
     alert("escenario1:sobreviviste"); 

     destino.style.background= 'url('+'imagenes/fondo2.png'+')'; 

    visibilidad1=0; 
    visibilidad2=1; 
    visibilidad3=0; 


    var imagen=new Image(); 
    imagen.src="imagenes/zombie2.png"; 
    miLienzo.globalAlpha=visibilidad2; 
    miLienzo.drawImage(imagen, 0, 0); 

    } else { 
     alert("escenario1:estas muerto"); 
    } 


    if (((((posx+32)-190)*((posx+32)-190) + ((posy+32)-360)*((posy+32)-360)) < 5625) && (elemento.id=="motor")) { 
     alert("escenario2:sobreviviste"); 
     destino.style.background= 'url('+'imagenes/fondo3.png'+')'; 

    visibilidad1=0; 
    visibilidad2=0; 
    visibilidad3=1; 

    var imagen=new Image(); 
    imagen.src="imagenes/zombie3.png"; 
    miLienzo.globalAlpha=visibilidad3; 
    miLienzo.drawImage(imagen, 0, 0); 



    } else { 
     alert("escenario2:estas muerto"); 
    } 

    if (((((posx+32)-440)*((posx+32)-440) + ((posy+32)-330)*((posy+32)-330)) < 1963) && (elemento.id=="sniper")) { 
     alert("escenario3:sobreviviste"); 

     destino.style.background= 'url('+'imagenes/fondo1.png'+')'; 

    visibilidad1=1; 
    visibilidad2=0; 
    visibilidad3=0; 

    var imagen=new Image(); 
    imagen.src="imagenes/zombie1.png"; 
    miLienzo.globalAlpha=visibilidad1; 
    miLienzo.drawImage(imagen, 0, 0); 



    } else { 
     alert("escenario3:estas muerto"); 
    } 



} 

function finalizado (e) { 
    e.preventDefault(); 


} 

function entrando (e){ 
    e.preventDefault(); 

} 

function saliendo (e) { 
    e.preventDefault(); 

} 

window.addEventListener("load", iniciar); 

我会感谢您的帮助 谢谢。

Answer 1

要清除画布区域，可以使用fillRect覆盖具有当前背景颜色的区域，也可以使用clearRect擦除区域中的所有内容，并留下透明方块。

现在，当您这样做时，您需要确保任何通常不会重绘的对象都不会被这些函数调用中的任何一个所限制。如果是的话，你还需要重新绘制它们。如果性能不是问题，请考虑清除画布的整个区域，并在所更新的位置重新绘制所有对象。