Tutorial sulla trasparenza - matematica con javascript su webfract

Contatti	MATEMATICA CON JAVASCRIPT - GUIDA CANVAS TUTORIAL PER CREARE FIGURE SOVRAPPOSTE TRASPARENTI

Il presente tutorial si riferisce a "colori con HTML5 canvas" della guida a MATEMATICA CON JAVASCRIPT, area Canvas.

Abbiamo preparato un documento che ha l'aspetto definito dalle righe di codice inserite nell'area di testo in basso a sinistra.
Il colore di base della canvas è #ffcc99. Cambiatelo a vostra scelta per vedere come cambia l'effetto finale. Ascisse e ordinate dei centri dei cerchi sono memorizzati, secondo l'ordine dato, rispettivamente nelle costanti xa xb, xc (le ascisse) e ya yb, yc (le ordinate); il raggio è memorizzato nella costante r.

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="canvas" width="450" height="450" style="border:1px solid #a0a0a0; background-color:#ffcc99"> Il tuo browser non supporta il tag HTML5 canvas.</canvas> <script> const r = 80 //raggio dei cerchi const xa=100 //Centro A const ya=100 const xc=180 //Centro C const yc=120 const xb=110 //Centro B const yb=180 var c = document.getElementById('canvas'); canvas=c.getContext('2d'); // insieme A canvas.beginPath(); canvas.fillStyle="rgba(255,0,0,1)"; canvas.arc(xa,ya,r,0,Math.PI*2); canvas.stroke(); canvas.fill(); canvas.fillStyle="black" canvas.fillText("A",xa-0.5*r,ya-r); //insieme C canvas.beginPath(); canvas.fillStyle="rgba(0,0,255,0.45)"; canvas.arc(xc,yc,r,0,Math.PI*2,false); canvas.stroke(); canvas.fill(); canvas.fillStyle="black" canvas.fillText("C",xc+0.5*r,yc-r); //insieme B canvas.beginPath(); canvas.fillStyle="rgba(0,255,0,0.3)"; canvas.arc(xb,yb,r,0,Math.PI*2,false); canvas.stroke(); canvas.fill(); canvas.fillStyle="black" canvas.fillText("B",xb+0.5*r,yb+r); </script> </BODY> </HTML>

RISULTATO

Matematica con javascript, area Canvas: Indice - Colori e canvas - Crea i tuoi colori Matematica con javascript Indice - Indice tutorials

MATEMATICA CON JAVASCRIPT - GUIDA CANVAS

TUTORIAL PER CREARE FIGURE SOVRAPPOSTE TRASPARENTI

CODICE

RISULTATO