Notes d'expérience

HTML ISO

: <progress> étiquette

Méthode fillRect() de HTML canvas 2La méthode drawFillRect() est utilisée par Canvas

Exemple en ligne

Dessiner 100*100 pixels carrés remplis :

Exemple

<!DOCTYPE html>
<html>
<head>
<title>Utilisation de la méthode fillRect() de HTML canvas (Tutoriel de base du site web oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="200" height="150" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge HTML5　canvas étiquette.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(20,20,100,100);
</script>
</body>
</html>

Vérifiez ici ‹/›

Compatibilité des navigateurs

IEFirefoxOperaChromeSafari

Internet Explorer 9et Firefox, Opera, Chrome et Safari prennent en charge la méthode fillRect().

Attention :Internet Explorer 8 Les versions précédentes de la norme ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

La méthode fillRect() dessine un rectangle 'rempli'. La couleur par défaut pour le remplissage est noire.

Astuce :Utilisez fillStyle Utilisez les propriétés pour définir la couleur, la dégradé ou le motif utilisés pour remplir le dessin.

Syntaxe JavaScript :	context.fillRect(x,y,width,height);

Valeur du paramètre

Paramètres	Description
x	L'ordonnée de la ligne de haut en haut du rectangle.
y	L'abscisse de la ligne de haut en haut du rectangle.
width	La largeur du rectangle, en pixels.
height	La hauteur du rectangle, en pixels.

Manuel de référence HTML canvas

HTML: <template> balise