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