Guida Html5 la tua risorsa web sul nuovo markup html5 il linguaggio javascript e lo sviluppo di giochi su browser.
TUTORIALS

Effetto glow su cerchi e linee con Canvas

- 13-06-2014 - Letture: 1136

Giochiamo con effetti di sfocature su linee e cerchi

Effetto glow su cerchi e linee con Canvas

In questo breve tutorial ho realizzato 2 utili funzioni che creano l'effetto neon (chiamato anche glow) su cerchi e linee all'interno di un canvas. L'effetto è molto utile nella realizzazione di giochi o per dare effetti particolari su banner animati.

Per cominciare partiamo dalla dichiarazione della funzione glow_line();

function glow_circle(x,y,raggio,r,g,b,glow_size)
{
	var gra = ctx.createRadialGradient(x,y,raggio,x,y,raggio + glow_size);
	gra.addColorStop(0,"rgba(" + r + "," + g + "," + b + ",1)");
	gra.addColorStop(1.0,"rgba(0,0,0,0)");
	ctx.fillStyle = gra;
	ctx.beginPath();
	ctx.arc(x, y, raggio + glow_size, 0, Math.PI*2, false);
	ctx.fill(); 	
}

La funzione molto semplice accetta in input le coordinate x,y dove posizionare il cerchio, il suo raggio, i valori rgb del colore e la dimensione dell'effetto glow in pixel.

Vediamo ora come invocare la funzione:


glow_circle(250,150,30,0,255,0,15);

Passiamo adesso alla funzione che traccia una linea con lo stesso effetto:

function glow_line(x,y,x1,y1,r,g,b,line_size,glow_size,glow_intensity)
{
	ctx.lineJoin = "round";	
	var incr = 1 / (glow_size * (1 / glow_intensity));
	var a = 0;
	
	for (var i= line_size + glow_size; i >=line_size; i--) {
		ctx.beginPath();
		ctx.lineWidth = i;
		if (i == line_size) ctx.strokeStyle = "rgba(" + r + "," + g + "," + b + ",1)";
		else ctx.strokeStyle = "rgba(" + r + "," + g + "," + b + "," + a + ")";
		
		ctx.moveTo(x,y);   // Top Corner
		ctx.lineTo(x1,y1); // Bottom Right
		ctx.closePath();
				
		a += incr;
		ctx.stroke();
	}
}

La funzione accetta il punto x,y di partenza della linea, le coordinate della sua destinazione x1,y1, il colore espresso in r,g,b lo spessore della linea, quello dell'effetto glow e infine l'intensita dell'effetto con valori tra 0 e 1.

In modo analogo alla funzione precedente vediamo la sua invocazione:


glow_line(150,50,50,200,255,0,0,3,13,0.15);

 

Articoli correlati
Loading comments
ebook sviluppare giochi in html5 e javascript
Il sito Guida HTML5 è stato realizzato da TheArchitect
Nome e Cognome
Email valida
Username
Password
* Cliccando su REGISTRATI accetti le nostre regole sulla privacy
ATTENZIONE: controllare sempre la cartella spam nella casella di posta, inquanto è possibile che alcuni provider inseriscano automaticamente la mail di attivazione in questa cartella.

CHIUDI
X

Password dimenticata ? Inserisci il tuo indirizzo email e ti invieremo i dati di accesso

Email valida
ATTENZIONE: controllare sempre la cartella spam nella casella di posta, inquanto è possibile che alcuni provider inseriscano automaticamente la mail di attivazione in questa cartella.

CHIUDI
X
Powered by: World(129)