CanvasRenderingContext2D.fill()
La méthode CanvasRenderingContext2D.fill()
de l'API Canvas 2D remplit le chemin courant ou donné avec la couleur de fond en cours, en utilisant la règle de remplissage extérieur/intérieur non nul ou la règle de remplissage pair/impair.
Syntaxe
js
void ctx.fill([fillRule]);
void ctx.fill(path[, fillRule]);
Paramètres
fillRule
-
L'algorithme utilisé pour déterminer si un point est à l'intérieur ou à l'extérieur du chemin. Valeurs possible:
nonzero
-
La règle de remplissage extérieur/intérieur non nul, qui est la règle par défaut.
evenodd
path
-
Un chemin
Path2D
(en-US) à remplir.
Exemples
Utiliser la méthode fill
Ceci est un simple snippet de code qui utilise la méthode fill
pour remplir un chemin.
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.rect(10, 10, 100, 100);
ctx.fill();
Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:
Code jouable
Utiliser l'option fillRule
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(96.5, 50.0);
ctx.bezierCurveTo(96.5, 62.84, 0.22, 99.82, 50.74, 47.17);
ctx.bezierCurveTo(100.18, 0.58, 62.84, 96.5, 50.0, 96.5);
ctx.bezierCurveTo(24.32, 96.5, 3.5, 75.68, 3.5, 50.0);
ctx.bezierCurveTo(3.5, 24.32, 24.32, 3.5, 50.0, 3.5);
ctx.bezierCurveTo(75.68, 3.5, 96.5, 24.32, 96.5, 50.0);
ctx.closePath();
ctx.fillStyle = "lightblue";
ctx.lineWidth = 2;
ctx.fill("nonzero");
ctx.stroke();
Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:
Code jouable 2
Spécifications
Specification |
---|
HTML Standard # dom-context-2d-fill-dev |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- L'interface qui définit cette méthode,
CanvasRenderingContext2D
.