cancellare linea col canvas

[iacoposk8]

ciao a tutti! se con il canvas ho disegnato una linea c'è modo di cancellarla senza ricaricare la pagina? e come?
grazie

[Xinod]

in genere il canvas si ripulisce con clearRect()

[iacoposk8]

quindi se l'ho inizializzato in questo modo

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

per ripulirlo dovrò scrivere

ctx.clearRect();

giusto?

[Xinod]

ctx.clearRect(0,0,300,300);
se il tuo canvas e' di 300x300 px

[iacoposk8]

cavolo hai indovinato! 300x300
grazie mille

[Xinod]

[iacoposk8]

ho provato un attimo e non va... io faccio una cosa di questo tipo:

for(j=0;j<=i;j++)
{
	ctx.lineTo(arx[i],ary[i]);
}
ctx.stroke();

praticamente serve a disegnare un grafico, e questo frammento di codice viene invocato al click del mouse (uno si posiziona dove vuol creare il punto, clicca a si crea punto per punto il grafico) solo che se metto ctx.clearRect(0,0,300,300); prima del for non mi cancella nulla, forse perchè è già stato stampato con ctx.stroke();

[Xinod]

se vuoi che io o qualcun altro vi dia un' occhiata lascia un link dove vedere lo script in azione

[iacoposk8]

ok grazie! il sito risiede qua praticamente se si clicca nel div grigio si crean delle linee... questo deve essere un grafico quindi la linea mettiamo che zig-zaga su e giu per l'asse y, e non può tornare in dietro nell'asse x tuttal'più si potrà creare un nuovo vertice (questo l'ho scritto per spiegare il frammento di codice che riordina l'array dei punti nella pagina)... la filosofia dovrebbe essere: per ogni click si inserisce nell'array delle x le x e in quello delle y le y, ogni volta che si clicca riordina l'array x in modo crescente (e di conseguenza quello delle y per mantenere le associazioni, l'y quindi non avrà un ordine numerico) e a questo punto cancella tutte le linee fatte e le ridisegna (scorrendo l'array x e y)
grazie della disponibilità

[Xinod]

Originariamente inviato da iacoposk8
ho provato un attimo e non va... io faccio una cosa di questo tipo:

for(j=0;j<=i;j++)
{
	ctx.lineTo(arx[i],ary[i]);
}
ctx.stroke();

praticamente serve a disegnare un grafico, e questo frammento di codice viene invocato al click del mouse (uno si posiziona dove vuol creare il punto, clicca a si crea punto per punto il grafico) solo che se metto ctx.clearRect(0,0,300,300); prima del for non mi cancella nulla, forse perchè è già stato stampato con ctx.stroke();

ma quello mi sembra funzionare
te ne accorgi dal momento che senza premettere clearRect crea delle doppie linee per i segmenti precedenti all' ultimo
mentre se lo metti le linee sono piu' sottili, quindi quello funziona

il resto (questo ordinamento di cui parli) probabilmente no