html5 - sombra - resplandor texto css3

Lienzo HTML5 crea un efecto de brillo externo de la forma. (5)

Quiero crear un efecto de brillo externo para las formas de arco en mi etiqueta de lienzo. Esto es lo que se supone que debe ser:

Hasta ahora tengo los círculos en blanco. Intenté usar una DropShadow que tiene un Desplazamiento de ''0'', pero esto no se ve bien.

¿Que sugieres? ¿Quizá las formas debajo que tienen un degradado de azul a negro? ¡Gracias por adelantado!

Edit: Finalmente lo tengo funcionando. Se utiliza un bucle for para dibujar círculos con diferente radio y alfa.

¿Son los círculos los archivos de imagen? Si es así, cree archivos de imagen con brillo aplicado en photoshop, GIMP, etc. Guárdelos como .PNG para preservar la transparencia del fondo.

Si se dibujan en la pantalla con funciones de dibujo de lienzo, entonces, ¿qué tal si redibujamos el círculo 25 veces, cada círculo obtiene un píxel más grueso de ancho?

El bucle es la solución, de hecho, pero sin reproducir el radio y el alfa. Simplemente establezca el ancho de línea grueso y la sombra con cero desplazamientos y desenfoque decente, luego dibuje los arcos en un bucle de ... algunos ... como con 10 que brillará.

ctx.fillStyle=''black''; ctx.fillRect(0,0,500,500); ctx.lineWidth=25; ctx.strokeStyle=''white''; ctx.shadowColor=''blue''; ctx.shadowOffsetX=0; ctx.shadowOffsetY=0; ctx.shadowBlur=25; for(a=0;a<10;a++) { ctx.beginPath(); ctx.arc(250,250,200,Math.PI/12,23*Math.PI/12); ctx.stroke(); ctx.beginPath(); ctx.arc(250,250,100,7*Math.PI/12,5*Math.PI/12); ctx.stroke(); }

Puedes crear un resplandor exterior usando una sombra como esta:

context.shadowBlur = 10; context.shadowColor = "black";

Eche un vistazo a este enlace para ver un ejemplo: http://www.williammalone.com/articles/html5-canvas-example/

Y aquí hay un JSFiddle realmente básico .

Creo que esto será más rápido que "un bucle for para dibujar círculos con diferente radio y alfa".

¡Espero que esto pueda ayudar!

Tenía curiosidad por encontrar la mejor solución para este problema, ya que estoy tratando de hacer algo similar y sigue siendo la mejor respuesta en Google. Resulta que, para el lienzo sobre un fondo negro, a menos que desee un brillo blanco, es mejor que lo dibuje manualmente en lugar de utilizar shadowBlur ya que el resultado es demasiado oscuro.

Así que aquí está el código, el resultado y JSFIddle para la solución que se me ocurrió, que creo que es algo similar a la respuesta aceptada. Funciona utilizando el mismo valor alfa pero cambiando el grosor de la línea que tiene un efecto aditivo. Tenga en cuenta el uso de lineCap que también agregará brillo a los extremos de las líneas.

Una sombra con un desplazamiento de 0, un gran radio de desenfoque y un color de sombra "claro" básicamente se ven como un brillo. Necesitaba poner un "resplandor" verde en una ruta rellena arbitraria, y mi código tenía este aspecto:

<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById(''myCanvas''); var context = canvas.getContext(''2d''); context.beginPath(); context.moveTo(20, 80); context.lineTo(80, 20); context.lineTo(550, 20); context.lineTo(550, 130); context.lineTo(490, 190); context.lineTo(20, 190); context.lineTo(20, 80); //context.rect(188, 40, 200, 100); context.fillStyle = ''red''; context.strokeStyle = ''#00ff00''; context.lineWidth = 10; context.shadowColor = ''#00ff00''; context.shadowBlur = 40; context.shadowOffsetX = 0; context.shadowOffsetY = 0; context.stroke(); context.fill(); </script> </body> </html>

Si simplemente reemplaza mi geometría de línea y con sus arcos circulares, podrá crear ese efecto sin archivos de imagen.