Ce n'est pas clair. Dois-je faire en sorte que la toile soit aussi petite que possible, puis la mettre à l'échelle à l'aide d'une feuille de style en cascade, ou définir les grandes dimensions de la toile à partir des attributs canvas.width et canvas.height (et "ne pas mettre la toile à l'échelle" du tout) ?
Oui et non, cela signifie que la mise à l'échelle d'un élément (toile ou tout autre) est plus rapide en utilisant transforme (c'est-à-dire la matrice de transformation) que d'utiliser la largeur et la hauteur CSS sur l'élément, car transforms utilise le GPU disponible. Plus :
Tout passe par les matrices de transformation de toute façon (à moins d'être optimisé pour ne pas le faire lorsqu'une matrice d'identité est rencontrée). Mise en page comme la largeur et la hauteur, etc., déclenche la refonte de la mise en page. Les transformations peuvent généralement passer à la peinture et à la composition.
Exemple : Comme vous pouvez le voir ici, la deuxième div a des transformations appliquées mais ne fait rien pour mise en page (l'espace fantôme pour le div est toujours là) :
div {
width:100px;padding:100px 0 0 0;margin:0 5px;
display:inline-block;background:#7f9;border:2px solid #000
}
div:nth-child(2) {
transform:scale(1.5) translate(30px, 30px)
}
<div></div><div></div><div></div><div></div>
Dans le cas des canevas, il y a un avantage supplémentaire du point de vue des performances et de la mémoire lorsque vous mettez à l'échelle un canevas plus petit pour l'adapter à la fenêtre du client (ou à l'élément parent) plutôt que d'utiliser un canevas plus grand et de le mettre à l'échelle, car dans ce dernier cas, vous produisez des données dont vous allez de toute façon rejeter des parties (et à une échelle non linéaire).
L'idée est de cibler un appareil : la taille que vous pensez que vos utilisateurs vont utiliser, comme un téléphone portable. Si l'écran est 1:1 comme ciblé, alors A-OK. Si l'utilisateur dispose d'un écran plus grand, il est préférable d'augmenter la taille de l'écran plutôt que de cibler une grande taille d'écran et de risquer que la plupart des utilisateurs doivent diminuer la taille de l'écran, ce qui gaspille de précieuses ( ?) ressources.
Certains diront qu'en augmentant l'échelle, on perd en qualité. C'est vrai, mais considérez le scénario. Si vous avez beaucoup d'action dans la toile, la plupart des gens ne le remarqueront pas.
D'un qualité Cependant, l'inverse peut être bénéfique car vous pouvez ré-échantillonner des données existantes au lieu de les synthétiser. C'est utile lorsque, par exemple, vous traitez de grandes images comme résultat final, mais que vous avez besoin de les prévisualiser à une taille plus petite.
Mais comme le sujet porte sur les performances, il est préférable de conserver le format 1:1 ou de le mettre à l'échelle via des transformations (CSS). Si vous remarquez la différence, cela dépend de votre code, de votre ordinateur et de ce que vous essayez d'accomplir avec.
