[ Leksykon ] [ JavaScript ] [ Metody ] [ Właściwości ] [ canvas ] [ CanvasRenderingContext2D ]

CanvasRenderingContext2D.fill()

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

fill()
fill(path)
fill(fillRule)
fill(path, fillRule)

Przykłady:

<script>

 window.onload = () => {

 const szer = 600;
 const wys = 600;

 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d");
 
 ctx.beginPath();
 ctx.rect(12, 12, 250, 250);
 ctx.fillStyle = "blue";
 ctx.fill("evenodd");

 ctx.fillStyle = "yellow";
 ctx.ellipse(100, 100, 100, 30, Math.PI * 1, 0, Math.PI * 2, false);
 ctx.fill("evenodd");

 ctx.beginPath();
 ctx.fillStyle = "orange";
 ctx.ellipse(150, 400, 50, 30, Math.PI * 1, 0, Math.PI, false);
 ctx.fill();
 
 let pathA = new Path2D();
 pathA.moveTo(135, 295);
 pathA.lineTo(215, 225);
 pathA.lineTo(345, 335);
 pathA.lineTo(165, 335);
 pathA.lineTo(295, 225);
 pathA.lineTo(375, 295);
 pathA.closePath();

 ctx.fillStyle = "red";
 ctx.fill(pathA, "nonzero");

 let pathB = new Path2D();
 pathB.moveTo(135, 175);
 pathB.lineTo(215, 105);
 pathB.lineTo(345, 215);
 pathB.lineTo(165, 215);
 pathB.lineTo(295, 105);
 pathB.lineTo(375, 155);
 pathB.closePath();

 ctx.fillStyle = "gray";
 ctx.fill(pathB, "evenodd");

 return;

 };

</script>

<canvas id="canvas" width="100" height="100"></canvas>

Opis:
Metoda CanvasRenderingContext2D.fill() wypełnia bieżącą lub podaną ścieżkę bieżącym plikiem fillStyle. Parametry fillRule - algorytm określający, czy punkt znajduje się wewnątrz, czy na zewnątrz obszaru wypełnienia. (Możliwa wartość: nonzero - niezerowa reguła nawijania, domyślna reguła, evenodd - parzysta i nieparzysta zasada kręta) path - ścieżka Path2D do wypełnienia.

Zobacz też: