Implémentation de la fonction gomme à l'aide de la méthode clearRect() dans les conseils du didacticiel HTML5 Canvas API_html5

Dans le monde réel, nous utilisons des pinceaux pour dessiner sur la planche à dessin ; dans le canevas html5, nous pouvons également utiliser le pinceau du canevas - l'objet CanvasRenderingContext2D pour dessiner sur le canevas. Comme nous le savons tous, nos pinceaux sont généralement utilisés avec des gommes pour corriger les erreurs lors du processus de peinture et repeindre. Dans le canevas HTML5, l'objet CanvasRenderingContext2D nous fournit également une gomme qui peut être réutilisée pour toujours - la méthode clearRect().

Code XML/HTMLCopier le contenu dans le presse-papiers

1. clearRect(x, y, largeur, hauteur)

La méthode clearRect() de l'objet CanvasRenderingContext2D est utilisée pour effacer tous les pixels graphiques dans la zone rectangulaire du canevas avec le point de coordonnées spécifié (x, y) comme coin supérieur gauche, la largeur comme largeur et la hauteur comme hauteur.

Maintenant, regardons un exemple pratique. Nous dessinons d’abord un cercle plein d’un rayon de 50 pixels, puis utilisons la gomme clearRect() pour effacer une zone locale à l’intérieur. Le code html5 original pour dessiner un cercle est le suivant :

Code JavaScriptCopier le contenu dans le presse-papiers

4. "UTF-8">
"myCanvas" width=
9. "400px" height="300px" style="bordure : 1px rouge uni ;"> Votre navigateur ne prend pas en charge la balise canvas.
15. L'effet d'affichage correspondant est le suivant :
16. Maintenant, nous utilisons la méthode clearRect() pour effacer la zone rectangulaire du cercle plein avec le centre (100,100) comme centre et 10px de chaque côté.

Code JavaScript

Copier le contenu dans le presse-papiers

L'effet d'affichage correspondant est le suivant (est-ce un peu comme une pièce de cuivre ?).

Sur la page, on peut effacer une zone de la page pour afficher l'image de fond.

Dans l'exemple ci-dessous, nous effaçons l'espace blanc dans le rectangle et le laissons afficher le fond de la page :

Code JavaScript

Copier le contenu dans le presse-papiers

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.        
7.   
8.   
9. "toile-warp">   
10.     "toile">   
11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
12.        

  

  

<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>        context.fillStyle = </span><span class="string">"#FFF"</span><span>;   </span> </li> <li class="alt"> <span>        context.fillRect(0,0,800,600);   </span> </li> <li> <span>  </span> </li> <li class="alt"> <span>        </span><span class="comment">//清空画布 </span><span>  </span> </li> <li> <span>        context.clearRect(0,0,canvas.width,canvas.height);   </span> </li> <li class="alt"> <span>  </span> </li> <li> <span>    } ;   </span> </li> <li class="alt"> <span></script>