Tutorial per il metodo clearRect - matematica con javascript su webfract

Contatti	MATEMATICA CON JAVASCRIPT - GUIDA CANVAS TUTORIAL PER IL METODO clearRect()

Il presente tutorial si riferisce al metodo "clearRect()", che permette di cancellare un rettangolo all'interno di un altro rettangolo.

Abbiamo preparato un documento che ha l'aspetto definito dalle righe di codice inserite nell'area di testo in basso a sinistra.
Ascisse e ordinate dei vertici sono memorizzati, secondo l'ordine dato, rispettivamente nelle variabili x (le ascisse)e y (le ordinate), mentre nelle variabili w e h sono state memorizzate, ordinatamente, base e altezza del rettangolo.

E' possibile cambiare anche le altre opzioni e quindi vedere l'anteprima cliccando sul tasto:

A LATO per osservare il risultato nell' iframe a destra nella pagina;
POPUP per osservare il risultato in una finestra popup

NOTA BENE - Gli utenti google chrome possono solo visualizzare il risultato in una popup, a causa del malfunzionamento del browser con gli iframe.

Infine, cliccando sul tasto AGGIORNA, viene ricaricata la pagina corrente come è adesso:

IN EVIDENZA DAL SITO

www.tommasobientinesi.it

La passione per i viaggi e la natura nel nuovo sito di Tommaso Bientinesi

CODICE

<HTML> <BODY> <canvas id="lavagna" width="250" height="250"></canvas> <script> var c = document.getElementById('lavagna'); var x=10; var y=50; var w=150; var h=150; var ctx=c.getContext("2d"); ctx.fillRect(x,y,w,h); // crea il rettangolo pieno ctx.clearRect(x+30,y+20,w,h); // cancella x=120; y=80; w=50; h=80; ctx.fillRect(x,y,w,h); // altro rettangolo ctx.clearRect(x+10,y+10,w-20,h-20); // cancella </script> </BODY> </HTML>

RISULTATO

Matematica con javascript, area Canvas: Indice - Metodo clearRect() Matematica con javascript Indice - Indice tutorials

MATEMATICA CON JAVASCRIPT - GUIDA CANVAS

TUTORIAL PER IL METODO clearRect()

CODICE

RISULTATO