Le canevas disparaît lors de l'animation du masque globalCompositeOperation "source-in"

Question

J'utilise le masque dégradé de composition "source-in" sur un canevas et je souhaite animer l'étirement du dégradé & du masque. Voici le code de compositing, une fonction appelée drawList:

var r = ctx.createLinearGradient(1100, 0, 1200 + stretch,0); 
r.addColorStop(0,"rgba(255, 255, 255, 1.0"); 
r.addColorStop(0.8,"rgba(255, 255, 255, 0.0"); 
ctx.fillStyle = r; 
ctx.globalCompositeOperation = "source-in"; 
ctx.fillRect(300, 0, 1200 + stretch, 1000); 

stretch commence à 0 et augmente en fonction animant l'aide requestAnimationFrame, que je l'ai vérifié œuvres lors de l'animation d'un simple rectangle ou même ctx.clearRect(300, 0, 1200 + stretch, 1000). La fonction d'animation appelle drawList à chaque itération et le drawList.

Lors du chargement du texte de la liste à partir de drawList fondus en fonction du remplissage en dégradé du rectangle ci-dessus. Le problème que je rencontre est que dès que la fonction d'animation est appelée, le canevas est effacé et ne redessine pas la liste. J'utiliserais ctx.clip(), mais j'ai vraiment besoin du dégradé pour créer l'effet de fondu.

Des idées? Est-ce une limitation de la toile?

Answer 1

Lorsque vous définissez des états de contexte de canevas tels que globalAlpha, globalCompositeOperation, clip, etc ... ces états restent actifs et peuvent affecter le reste de votre rendu. Une façon de résoudre cela est de rétablir tous les états après les avoir utilisés. Cela peut aboutir à beaucoup de code supplémentaire afin que l'API 2Dcontext fournisse deux fonctions pratiques pour contrôler l'état. ctx.save() et ctx.restore()

ctx.save() pousse l'état actuel vers une pile. ctx.restore() affiche le dernier état enregistré et définit le contexte du canevas dans cet état. Vous pouvez imbriquer des sauvegardes, mais n'oubliez pas de faire correspondre chaque sauvegarde avec une restauration.

Pour plus d'informations voir ctx.save() at MDN

Un mot d'avertissement. L'enregistrement et la restauration des états doivent être évités si vous recherchez un rendu haute performance pour les jeux et les interfaces en temps réel. Les modifications d'état peuvent être un point de blocage lors du rendu ou simplement répliquer les modifications d'état inutiles. La restauration d'un état peut forcer le GPU à recharger à partir de la mémoire du processeur une bitmap utilisée par ctx.createPattern() dans un état précédemment enregistré, même si vous n'avez pas l'intention de l'utiliser. Cela peut être très lent et avoir un impact majeur sur les performances de votre frame rate, surtout si vous continuez à restaurer ce pattern inutilisé.