La fonction de startPath est très simple, elle consiste à démarrer un nouveau chemin, mais elle est très importante dans le processus d'utilisation du dessin sur toile.
Regardons d'abord un petit morceau de code :
var ctx=document.getElementById(canvas).getContext(2d); ctx.beginPath(); ctx.rect(150,150,100,100); ctx.fillStyle=green; .fillStyle=jaune ; ctx.fill();
Notre code ne contient aucune erreur, mais nous obtenons deux carrés jaunes d'une longueur de côté de 100 px, au lieu d'un vert et d'un jaune. Pourquoi ?
En fait, les méthodes de dessin (fill, stoke) dans Canvas dessineront tous les chemins après le dernier BeginPath. Dans le code ci-dessus, le premier rectangle est rempli deux fois, la première fois est vert et la deuxième fois est jaune, donc deux rectangles jaunes. ont été obtenus. De même pour dessiner des segments de ligne, ou d'autres courbes ou graphiques, peu importe où vous vous déplacez, tant que vous n'avez pas de chemin de début, vous dessinez un chemin.
Si les graphiques que vous dessinez ne correspondent pas à ce que vous avez imaginé, pensez à vérifier BeginPath.
Quand on parle de startPath, nous devons mentionner closePath. En fait, les deux n'ont rien à voir l'un avec l'autre. closePath signifie fermer le chemin, pas terminer le chemin. Il relie simplement le point final du chemin au point de départ. , pour ne pas commencer un nouveau chemin.
Nous ajoutons un closePath après le premier remplissage du code ci-dessus, et nous obtenons toujours deux rectangles jaunes.
Mais si nous ajoutons un beginPath plus tard, nous obtiendrons deux rectangles de couleurs différentes.
En résumé, n'essayez pas de démarrer un nouveau chemin en fermant une section du chemin, et si vous ne fermez pas le chemin, même si vous démarrez un nouveau chemin, il ne sera pas fermé.
Supplément : Comprendre Beginpath et Closepath du canevasMéthode BeginPath()
var ctx = document. getElementById ( 'cvs' ) . getContext ( '2d' ) ; ctx. moveTo ( 100.5 , 20.5 ) ; ; ctx . moveTo ( 100,5 , 40,5 ) ; ctx.lineTo ( 200,5 , 40,5 ) ctx. traitStyle = '#f00' ;
Le 0,5 sert à éviter les lignes floues. Alors, quel type de graphiques le code ci-dessus obtiendra-t-il ? Est-ce une ligne noire et une ligne rouge ?
Du point de vue du code, il n'y a aucun problème avec notre logique, mais le résultat est que nous obtenons deux lignes rouges, pas une noire et une rouge.
Si vous comprenez pourquoi, vous n’avez pas besoin de lire le reste. C’est l’importance de BeginPath.
Les méthodes de dessin dans le canevas (telles que le contour, le remplissage) dessineront en fonction de tous les chemins après le dernier BeginPath. Par exemple, j'ai caressé deux fois dans le code ci-dessus. En fait, ces deux traits étaient basés sur tous les chemins après le premier BeginPath. C'est-à-dire que nous avons tracé deux fois le premier trait. Le premier trait était noir, et le deuxième trait était rouge, donc il était aussi rouge à la fin.
1. Peu importe où vous utilisez moveTo pour déplacer le pinceau, tant que vous ne commencez pas Path, vous tracez toujours un chemin.
2. Les fonctions telles que fillRect et StrokeRect, qui dessinent directement des zones indépendantes, n'interrompront pas le chemin actuel.
Si les graphiques que vous dessinez sont différents de ce que vous imaginiez, pensez à vérifier s'il existe un startPath raisonnable.
-------
En parlant de BeginPath, nous devons mentionner closePath. Les deux sont-ils étroitement liés ? La réponse est presque rien.
closePath ne signifie pas terminer le chemin, mais fermer le chemin. Il tentera de connecter un chemin depuis la fin du chemin actuel jusqu'au point de départ pour fermer le chemin entier. Cependant, cela ne signifie pas que le chemin qui suit est le nouveau chemin !
Nous ajoutons closePath après la première ligneTo dans le code ci-dessus, et nous pouvons constater que nous obtenons toujours deux lignes rouges.
Mais si nous ajoutons beginPath après le premier trait, nous obtiendrons une ligne noire et une ligne rouge comme prévu.
ctx.AVC ( ) ; ctx.beginPath ( ) //Attention ! ctx. moveTo ( 100,5 , 40,5 ) ; ctx. lineTo ( 200,5 , 40,5 ) ctx.
En résumé, n'essayez pas de démarrer un nouveau chemin en fermant un chemin existant. Lorsque vous démarrez un nouveau chemin, le chemin précédent ne sera pas fermé.