試圖刪除由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擦除區域中的所有內容，並留下透明方塊。

現在，當您這樣做時，您需要確保任何通常不會重繪的對象都不會被這些函數調用中的任何一個所限制。如果是的話，你還需要重新繪製它們。如果性能不是問題，請考慮清除畫布的整個區域，並在所更新的位置重新繪製所有對象。