Javascript/jQuery: rimuovi forma/percorso dalla tela

Question

Non riesco a trovare la funzione per rimuovere una forma o un percorso dalla tela dopo che è stata creata.

Così Sto creando una curva di Bezier tra 2 punti con

beginPath(); 
bezierCurveTo(); 
stroke(); 
closePath(); 

Come posso rimuovere questo dalla tela una volta che è stato creato? Devo essere in grado di chiamare la funzione di rimozione tramite toggle() e blur(). Sono sicuro che esiste qualcosa per questo ...

Grazie in anticipo per qualsiasi aiuto!

Answer 1

Grazie per il grande ingresso a tutti voi - mi ha aiutato a trovare la soluzione:

context.clearRect(x,y,w,h); 

(link)

Questo sarà chiaro tutto ciò all'interno di tale rettangolo.

Ho trovato il metodo sulla pagina che ho trovato mentre scavo la risposta di ILog per salvare/ripristinare il contesto, ed è tutto lì. Grazie ancora.

Answer 2

Per quanto ricordo le specifiche, è necessario chiamare context.save() prima di disegnare, quindi disegnare qualcosa, quindi chiamare context.restore() per tornare allo stato precedente.

Answer 3

Non è possibile rimuovere un tracciato/forma dall'area di disegno. Puoi disegnare qualcos'altro su di esso o cancellare la tela.

Answer 4

Si potrebbe provare a utilizzare SVG invece di tela. C'è una fantastica libreria chiamata Raphaël che rende il lavoro con SVG un gioco da ragazzi. Funziona anche su tutti i browser, incluso IE6.

Con SVG ogni forma è il proprio elemento che può essere spostato, trasformato o rimosso.

Answer 5

Se stai usando JQuery:

var elem = $("selector"); 
var canvas = elem.get(0); 
var context = canvas.getContext("2d"); 

context.clearRect(0, 0, canvas.width, canvas.height); 
context.beginPath(); 

sostituire "selettore" con il selettore attuale JQuery.

Answer 6

Per cancellare la tela, utilizzare il seguente codice

canvas_context.clearRect(0,0,canvas_1.width,canvas_1.height); 

Usare sempre BeginPath metodo quando si stanno iniziando a tracciare un nuovo percorso e metodo closePath dopo aver finito di disegnare il vostro percorso.

NOTA:percorsi che non sono chiusi non possono essere cancellati.

Se i percorsi non vengono cancellati, deve essere a causa del motivo sopra.

Tutti percorso deve iniziare con BeginPath() e finire con closePath()

Esempio:

 canvas_context.beginPath(); 
    canvas_context.moveTo(x1,y1); 
    canvas_context.lineTo(x2,y2); 
    canvas_context.stroke(); 
    canvas_context.closePath(); 

Il codice seguente cancella anche la tela

canvas_1.width = canvas_1.width; 

NOTA:L'istruzione sopra riportata reinizializza una tela quindi cancella una tela. Qualsiasi istruzione che reinizializza una tela cancellerà una tela.

Answer 7

Questa è una cosa importante da realizzare su <canvas>. È un'immagine appiattita composta da pixel. Una volta che qualcosa viene attirato, è fuso nella griglia dei pixel e non può essere differenziato dagli altri pixel.

Se è necessario essere in grado di separare gli elementi dell'immagine si potrebbe:

1. Overlay <canvas> elementi in una pila di strati
2. Uso <svg> in cui ogni elemento visivo è distinto dagli altri elementi e può essere manipolato in modo indipendente

Si può pensare a <canvas> come a un singolo livello in PhotoShop/Gimp/Fireworks o in un documento MSPaint.

Si può pensare a <svg> come documento in Illustrator/InkScape.

Answer 8

Prova questa:

ctx.save(); 
ctx.globalCompositeOperation = "destination-out"; 
// drawing here you path second time 
ctx.restore(); 

"L'attributo globalCompositeOperation imposta come forme e immagini sono disegnati sulla bitmap zero" specs

Come funziona si può vedere here.