sombra de lienzo html que se aplica a todo

Question

Si define una sombra UNA VEZ, se aplica a todos los "gráficos" en el lienzo de allí en adelante (que es lo que se supone que debe hacer).

muestra: http://flanvas.com/development/flanvas/test.html

¿Alguien sabe la mejor práctica para convertir la sombra después de haberlo utilizado? Estoy configurando shadowColor en "rgba (0,0,0,0)", que es un negro sin alfa. Estoy seguro de que hay una mejor manera.

muestra de caso: El texto también está recibiendo una sombra. Estoy usando el negro sin alfa para combatir esto por ahora. http://flanvas.com/development/flanvas/examples/filters-dropShadowFilter.html

Answer 1

Mediante el uso de save, translate y restore puede realizar sus tareas sin tener que preocuparse acerca de los cambios en el estilo, por ejemplo.

ctx.save(); 
ctx.translate(X,Y); 

ctx.shadowColor = 'rgba(255, 0, 0, 0.5)'; 

// do some stuff 

ctx.restore(); 

aquí X & Y son las coordenadas donde se pretendía extraer y hacer sus cosas en relación con las coordenadas 0,0.

Este método resuelve el problema de almacenamiento en caché y la restauración de los estilos/los valores anteriores y también es muy útil cuando se trabaja con gradientes, ya que siempre se trazan en relación con el origen (0,0)

Answer 2

Por lo general, es una buena idea almacenar el valor antiguo de este tipo de atributos "globales" antes de cambiarlo y utilizar este valor almacenado para restaurarlo más adelante. Ejemplo:

var origShadowColor = ctx.shadowColor; 
ctx.shadowColor = 'rgba(255, 0, 0, 0.5)'; 

// ... do some stuff 

ctx.shadowColor = origShadowColor; 

Answer 3

(EDIT: Vaya veo que es . lo que ya estaba haciendo con un negro 0 alfa)

Esto es lo que estaba buscando:

context.shadowColor = "transparent";