Exemple d'analyse du rôle de BeginPath() et closePath() dans Canvas

Ce que cet article vous apporte est un exemple d'analyse des fonctions de beginPath() et closePath() dans Canvas. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

La fonction de beginPath 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";
    ctx.fill();
    ctx.rect(0,0,100,100);
    ctx.fillStyle="yellow";
    ctx.fill();

Notre code ne contient aucune erreur, mais nous obtenons deux carrés jaunes d'une longueur de côté de 100px, au lieu d'un vert et d'un jaune. ce?

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 Vert, jaune pour le la deuxième fois, nous avons donc deux rectangles jaunes. La même chose est vraie pour dessiner des segments de ligne, ou d'autres courbes, 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 à cocher startPath

Quand on parle de startPath, il faut mentionner closePath En fait, les deux n'ont rien à voir l'un avec l'autre. other. closePath signifie close Le chemin n'est pas la fin du chemin, il relie simplement le point final du chemin au point de départ, plutôt que de commencer un nouveau chemin.

On ajoute un closePath après le premier remplissage du code ci-dessus, et on obtient toujours deux rectangles jaunes.

Mais si on ajoute un beginPath à la fin, on obtiendra 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é .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!