Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
CanvasRenderingContext2D.fill()
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
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
void ctx.fill([fillRule]);
void ctx.fill(path[, fillRule]);
Paramètres
Exemples
Utiliser la méthode fill
Ceci est un simple snippet de code qui utilise la méthode fill pour remplir un chemin.
HTML
<canvas id="canvas"></canvas>
JavaScript
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
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.rect(10, 10, 100, 100);
ctx.fill();</textarea>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener("click", function () {
textarea.value = code;
drawCanvas();
});
edit.addEventListener("click", function () {
textarea.focus();
});
textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
Utiliser l'option fillRule
HTML
<canvas id="canvas"></canvas>
JavaScript
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
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.beginPath();
ctx.moveTo(96.50,50.00);
ctx.bezierCurveTo(96.50,62.84,0.22,99.82,50.74,47.17);
ctx.bezierCurveTo(100.18,0.58,62.84,96.50,50.00,96.50);
ctx.bezierCurveTo(24.32,96.50,3.50,75.68,3.50,50.00);
ctx.bezierCurveTo(3.50,24.32,24.32,3.50,50.00,3.50);
ctx.bezierCurveTo(75.68,3.50,96.50,24.32,96.50,50.00);
ctx.closePath();
ctx.fillStyle = "lightblue";
ctx.lineWidth = 2;
ctx.fill("nonzero");
ctx.stroke();</textarea>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener("click", function () {
textarea.value = code;
drawCanvas();
});
edit.addEventListener("click", function () {
textarea.focus();
});
textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
Spécifications
| Spécification |
|---|
| HTML # dom-context-2d-fill-dev |
Compatibilité des navigateurs
Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.
Voir aussi
- L'interface qui définit cette méthode,
CanvasRenderingContext2D.
Aider à améliorer MDN
Cette page a été modifiée le par les contributeur·ice·s du MDN.