Super stratégie pour dessiner des rectangles à l'aide des conseils du didacticiel HTML5 Canvas API_html5

Utilisez closePath() pour fermer la forme
Nous dessinons d'abord un rectangle en utilisant la méthode la plus courante.

Code JavaScriptCopier le contenu dans le presse-papiers

1.   
2. "fr">   
3.   
4.     "UTF-8">   
5.        
6.   
7.   
8.   
9. "zh">   
10.   
11.     "UTF-8">   
12.        
13.   
14.   
15. "toile-warp">   
16.     "canvas" style="border : 1px solid #aaaaaa; affichage : bloc ; marge : 50px auto ;">   
17.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
18.        

  

  

<script>   </span></li> <li> <span>    window.onload = </span><span class="keyword">fonction</span><span>(){   </span> </li> <li class="alt"> <span>        </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>);   </span> </li> <li><span>        canvas.width = 800 ;   </span></li> <li class="alt"><span>        canvas.height = 600 ;   </span></li> <li> <span>        </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span>);   </span> </li> <li class="alt"><span>  </span></li> <li><span>        context.beginPath();   </span></li> <li class="alt"><span>        context.moveTo(150,50);   </span></li> <li><span>        context.lineTo(650,50);   </span></li> <li class="alt"><span>        context.lineTo(650 550);   </span></li> <li><span>        context.lineTo(150 550);   </span></li> <li class="alt"> <span>        context.lineTo(150,50);     </span><span class="comment">//绘制最后一笔使图像闭合 </span><span>  </span> </li> <li><span>        context.lineWidth = 5;   </span></li> <li class="alt"> <span>        context.StrokeStyle = </span><span class="string">"noir"</span><span>;   </span> </li> <li><span>        context.Stroke();   </span></li> <li class="alt"><span>  </span></li> <li><span>    }   </span></li> <li class="alt"><span></script>   

  

  

  

  

Résultat de l'exécution :

À première vue, il n'y a rien de mal à cela, mais les chaussures pour enfants ayant une bonne vue ont découvert qu'il y avait un problème lorsque le dernier coup est fermé, ce qui entraîne un espace dans le coin supérieur gauche. Cette situation est causée par la définition de lineWidth. Si la valeur par défaut est 1 course, il n'y aura aucun problème. Mais plus les traits sont larges et les lignes plus larges, plus cet écart sera évident. Alors comment éviter cette situation ?
Le titre l'a déjà gâché, utilisez ClothPath() pour fermer la forme.

Code JavaScriptCopier le contenu dans le presse-papiers

2. "zh">
3. "UTF-8"
4. >
6. "toile-warp"
7. >
8. "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto ;">
9. Votre navigateur ne prend pas en charge Canvas ? ! Changez-le vite ! !

<script> </li> <li> <span></span> window.onload = </li> <li class="alt">fonction<span></span>(){ </li> <li> <span></span> </li> <li class="alt">var<span></span> canvas = document.getElementById(<span class="keyword"></span>"canvas"<span></span> </li> <li>); <span></span> toile.width = 800 <span class="keyword"></span> <span></span> toile.hauteur = 600 <span class="string"></span> <span></span> </li> <li class="alt">var<span></span> context = canvas.getContext(</li> <li>"2d"<span></span> </li> <li class="alt">); <span></span> <span class="keyword"></span> <span></span> context.beginPath(); <span class="string"></span> <span></span>context.moveTo(150,50); </li> <li> <span></span> context.lineTo(650,50); </li> <li class="alt"> <span></span>context.lineTo(650,550); </li> <li> <span></span>context.lineTo(150,550); </li> <li class="alt"> <span></span> context.lineTo(150,50); </li> <li>//Vous n'avez pas besoin de dessiner le dernier trait <span></span> </li> <li class="alt"> <span></span> context.closePath(); </li> <li>//Utilisez closePath() pour fermer le graphique <span></span> <span class="comment"></span> <span></span> </li> <li class="alt"> <span></span> context.lineWidth = 5; <span class="comment"></span> <span></span> context.StrokeStyle = </li> <li>"noir"<span></span> </li> <li class="alt"> <span></span> contexte.AVC(); </li> <li> <span></span> <span class="string"></span> <span></span> } </li> <li class="alt"> <span></span></script>

Résultat de l'exécution :

Dans cet exemple, combiné avec l'explication de la leçon précédente, nous savons que lorsque nous dessinons un chemin, nous devons envelopper le chemin prévu avec startPath() et closePath(). Bien sûr, vous n'avez pas besoin de dessiner le dernier trait, utilisez simplement closePath() directement, et il le fermera automatiquement pour vous. (Donc si vous ne voulez pas dessiner une forme fermée, vous ne pouvez pas utiliser closePath())

Colorez le rectangle
Nous allons introduire ici une méthode fill() qui est tout aussi importante que Stroke(). Tout comme le trait original, avant de remplir, il faut d'abord utiliser l'attribut fillStyle pour sélectionner la couleur à remplir.
Par exemple, si on veut colorer le rectangle au dessus en jaune, on peut l'écrire comme ceci.

Code JavaScriptCopier le contenu dans le presse-papiers

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.   
7.   
8. "canvas-warp">   
9.     "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
10.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
11.        

  

  

<script>   </span></li> <li class="alt"> <span>    window.onload = </span><span class="keyword">fonction</span><span>(){   </span> </li> <li> <span>        </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>);   </span> </li> <li class="alt"><span>        canvas.width = 800 ;   </span></li> <li><span>        canvas.height = 600 ;   </span></li> <li class="alt"> <span>        </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span>);   </span> </li> <li><span>  </span></li> <li class="alt"><span>        context.beginPath();   </span></li> <li><span>        context.moveTo(150,50);   </span></li> <li class="alt"><span>        context.lineTo(650,50);   </span></li> <li><span>        context.lineTo(650 550);   </span></li> <li class="alt"><span>        context.lineTo(150 550);   </span></li> <li> <span>        context.lineTo(150,50);     </span><span class="comment">//最后一笔可以不画 </span><span>  </span> </li> <li class="alt"> <span>        context.closePath();        </span><span class="comment">//使用closePath()闭合图形 </span><span>  </span> </li> <li><span>  </span></li> <li class="alt"> <span>        context.fillStyle = </span><span class="string">"jaune"</span><span>;   </span><span class="comment">//选择油漆桶的颜色 </span><span>  </span> </li> <li><span>        context.lineWidth = 5;   </span></li> <li class="alt"> <span>        context.StrokeStyle = </span><span class="string">"noir"</span><span>;   </span> </li> <li><span>  </span></li> <li class="alt"> <span>        context.fill();                 </span><span class="comment">//确定填充 </span><span>  </span> </li> <li><span>        context.Stroke();   </span></li> <li class="alt"><span>  </span></li> <li><span>    }   </span></li> <li class="alt"><span></script>   

  

  

  

  

  

Résultat de l'exécution :

Ce qu'il faut noter ici, c'est une bonne pratique de codage. Parce que, comme mentionné précédemment, Canvas est un dessin basé sur un état et le dessin n'est déterminé que lorsque Stroke() et Fill() sont appelés. Nous allons donc mettre ces deux lignes de code à la fin, et le reste du code de paramétrage d'état avant elles, pour séparer le paramétrage d'état du code qui détermine le tirage. Améliorer la lisibilité du code.

Méthode de dessin encapsulé
Vous devez avoir découvert que dessiner un rectangle implique en fait quatre traits comme celui-ci. Chaque fois que nous utilisons cette méthode stupide pour dessiner un rectangle, nous devons les dessiner. quatre coups. Combien de problèmes si nous devons dépenser 10 rectangles ? 100 ? 1 000 ? S'il est écrit ainsi, le code sera gonflé et la réutilisabilité sera très faible. Ici, nous pouvons utiliser JavaScript pour encapsuler ces méthodes. Nous savons qu'un rectangle peut être déterminé de manière unique par les coordonnées de son coin supérieur gauche ainsi que par sa longueur et sa largeur.
Fonction JavaScript
Nous introduisons ici les fonctions JavaScript. Si vous avez des connaissances de base, vous pouvez sauter cette section et passer directement aux sections suivantes.
Les appels de déclaration de fonction des langages JavaScript et ActionScript sont les plus simples parmi les langages de programmation.
Le rôle de la fonction
Le rôle de la fonction est d'écrire du code une fois puis de réutiliser ce code à plusieurs reprises. Par exemple : nous voulons compléter la fonction de plusieurs ensembles de sommes.

Code JavaScriptCopier le contenu dans le presse-papiers

1. var somme
2. somme = 3 2
3. alerte (somme);
5. somme=7 8 ;
6. alerte (somme);
8. .... //Répétez deux lignes de code  

Si vous souhaitez implémenter la somme de 8 groupes de nombres, vous aurez besoin de 16 lignes de code. Plus vous en implémentez, plus vous aurez besoin de lignes de code. Par conséquent, nous pouvons placer le bloc de code qui exécute une fonction spécifique dans une fonction et appeler cette fonction directement, ce qui évite d'avoir à saisir à plusieurs reprises une grande quantité de code.
Utilisez les fonctions pour compléter :

Code JavaScriptCopier le contenu dans le presse-papiers

1. fonction add2(a,b){
2. somme = a b
3. alerte(somme);
4. } // Vous ne devez l'écrire qu'une seule fois
6. ajouter2(3,2);
7. ajouter2(7,8);
8. .... //Appelez simplement la fonction  

Définir une fonction
Comment définir une fonction ? Jetez un œil au format ci-dessous :

Code JavaScriptCopier le contenu dans le presse-papiers

1. fonction Nom de la fonction ( )
2. {
3. Corps de fonction
4. }

function est le mot-clé qui définit une fonction, "function name" est le nom que vous donnez à la fonction et "function body" est remplacé par le code qui complète la fonction spécifique.
Appel de fonction
Une fois qu'une fonction est définie, elle ne peut pas être exécutée automatiquement. Vous devez l'appeler et écrire le nom de la fonction directement à la position requise. Il existe généralement deux manières :

Cas 1 : Appelé dans la balise <script> </p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">Code JavaScript</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_6911')">Copier le contenu dans le presse-papiers</span> </div> <div id="code_6911"> <ol class="dp-c"> <li class="alt"><span><span><script> </span></span></li> <li>fonction<span></span> tcon() <span class="keyword"></span> <span></span>{ </li> <li class="alt"> <span></span> alert(</li> <li>"Félicitations pour l'apprentissage de l'appel de fonction!"<span></span> <span class="string"></span>); <span></span>} </li> <li class="alt"> <span></span>tcon(); </li> <li>//Appelez la fonction et écrivez directement le nom de la fonction. <span></span> <span class="comment"></span> <span></span></script>

Deuxième cas : Appelé dans un fichier HTML, comme appeler une fonction définie après avoir cliqué sur un bouton.