this.context.drawImage(myimage, 0, 0);
Mettere l'immagine sulla tela è abbastanza ben coperto in tutto il web. Ma come lo rimuovo dopo che è lì?Come rimuovere, nascondere, rimuovere o eliminare un'immagine da una tela html?
Opzione 1:
Disegnare su di esso un rettangolo dello stesso colore dello sfondo.
Opzione 2 (lavora per lo sfondo non banale, ma più lento):
Get the pixel data dalla tela prima di disegnare l'immagine, quindi ridisegnare che i dati dei pixel per rimuovere l'immagine.
Sono andato con una routine di "ridisegno" che cancella e ridisegna l'intero canvas quando richiesto, in quanto non è animato o particolarmente affamato di risorse. –
La tela è una superficie di disegno immediata. Ciò significa che si esegue un comando su di esso (drawImage o fillRect) e lo fa, e non gliene frega niente di ciò che ha appena fatto. Non c'è rovina di qualcosa.
Hai avuto difficoltà a cercarlo perché non esiste una "rimozione" per una tela. Tutto ciò che sa è che ha alcuni pixel di un certo colore da da qualche parte. Non ha idea di dove.
Per semplificare un po ', ci sono generalmente due modi:
Noterai in 1. che probabilmente dovrai iniziare a tenere traccia delle cose che disegni su tela se vuoi che alcune di esse vengano rimosse o riposizionate in modo selettivo. Instillare la persistenza dell'oggetto, o meglio trasformare la tela da una superficie di disegno immediata in una superficie di disegno mantenuta, è qualcosa che fanno molte librerie di tela. Se vuoi farlo da solo, ho scritto alcuni tutorails per aiutare le persone a iniziare.
Se si desidera esaminare le librerie, dare uno sguardo a easel.js. È abbastanza imparabile.
Quindi mi è venuto in mente un modo semplice e veloce per cancellare la tela. Ho appena inserito i miei tag <canvas> tra i tag <p> con un ID, quindi ogni volta che ho avuto bisogno della mia area di disegno ho modificato i miei tag <p> modificando il innerHTML, funziona come un incantesimo.
La tela HTML5 è giustamente chiamata in quanto si comporta quasi come una tela reale, è possibile dipingere (renderizzare) le cose lì ma non è possibile rimuoverla. Puoi dipingerci sopra con un'altra immagine, puoi cancellare i pixel che hanno reso quell'immagine, oppure puoi cancellare completamente la tela. Questa risposta StackOverflow mostra come cancellare solo i pixel dell'immagine occupa http://stackoverflow.com/questions/3458244/removing-an-image-from-a-canvas-in-html5 – kreek
Thx. Ora, perché questa domanda non è stata visualizzata all'inizio dei risultati di ricerca per "[html5] [canvas] remove"? Lo trova se si aggiunge "rimozione" alla query di ricerca, ma un po 'bisogno di sapere qual è la linea dell'oggetto per capire come trovarlo. –