L'utilisation de la toile peut-elle créer un effet de lueur sur une forme semi-transparente?

Question

J'ai une forme semi-transparente:

ctx.fillStyle = "rgba(255, 255, 255, 0.5)"; 
ctx.beginPath(); 
ctx.moveTo(0, 150); 
ctx.lineTo(300, 0); 
ctx.lineTo(300, 450); 
ctx.lineTo(50, 500); 
ctx.closePath(); 
ctx.fill(); 

Je veux ajouter un peu d'ombre, mais je veux qu'il apparaisse seulement en dehors de la forme, je suppose que plus d'une lueur qu'une ombre. Est-il possible de le faire en toile comme mes tentatives avec:

ctx.shadowBlur = 5; 
ctx.shadowColor = 'rgba(0, 0, 0, 0.25)'; 

fée regard ordinaire comme l'ombre est visible à travers la forme semi-transparente.

Merci!

Answer 1

Je pense que la façon la plus simple de le faire est de créer une zone de découpage qui inclut tout ce qui est en dehors de la forme et dessine ensuite l'ombre.

Il existe une description de la création de régions de plans inversés ici: forums.whatwg.org.

En fait, pour vous les étapes seraient:

ctx.save(); // store initial clip region 

ctx.beginPath(); 
ctx.moveTo(0, 0); 
ctx.lineTo(0, canvas.width); 
ctx.lineTo(canvas.height, canvas.width); 
ctx.lineTo(canvas.height, 0); 
ctx.lineTo(0, 0); 
// {subpath of your shape here} 
ctx.clip() 

Ensuite, activez les ombres et dessiner votre forme.

Restaurez la région clip initial:

ctx.restore() 

Puis, sans ombres, dessinez votre forme comme d'habitude.