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
-
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
-
-
-
- "UTF-8">
Exemple de démarrage d'utilisation de HTML5 clearRect() pour effacer une zone rectangulaire spécifiée
-
-
-
-
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
-
-
"zh">
-
-
"UTF-8">
-
clearRect()
-
-
-
-
"toile-warp">
-
"toile">
-
你的浏览器居然不支持Canvas？！赶快换一个吧！！
-
-
<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>
