Effetto glow su cerchi e linee con Canvas



by   |  LETTURE 2053

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);