Definice a použití
Metoda CanvasRenderingContext2D.fill() je součástí Canvas API a slouží pro vyplnění canvas objektu určitou barvou. Styl vyplnění se definuje pomocí CanvasRenderingContext2D.fillStyle .
Metoda CanvasRenderingContext2D.fill() je součástí Canvas API a slouží pro vyplnění canvas objektu určitou barvou. Styl vyplnění se definuje pomocí CanvasRenderingContext2D.fillStyle .
Parametr | Popis |
---|---|
pravidloVyplňování | Algoritmus určující jakým stylem se má objekt vyplňovat. Možné hodnoty jsou "nonzero" (defaultní) nebo "evenodd". |
path | 2D cesta pro vyplnění |
document.write("<strong>Canvas 1:</strong><br/>");document.write("<canvas id='canvas1'></canvas>");var ctx = document.getElementById("canvas1").getContext("2d");ctx.beginPath();ctx.arc(52, 52, 50, 0, 2*Math.PI);ctx.fill();document.write("<strong>Canvas 2:</strong><br/>");document.write("<canvas id='canvas2'></canvas>");var ctx = document.getElementById("canvas2").getContext("2d");ctx.beginPath();ctx.rect(10, 10, 100, 100);ctx.fillStyle = "#ff0000";ctx.fill();document.write("<strong>Canvas 3:</strong><br/>");document.write("<canvas id='canvas3'></canvas>");var ctx = document.getElementById("canvas3").getContext("2d");ctx.arc(52, 52, 50, 0.25*Math.PI, 1.25*Math.PI, false);ctx.fillStyle = "rgb(255, 255, 0)";ctx.fill();ctx.beginPath();ctx.arc(52, 52, 50, 0.75*Math.PI, 1.75*Math.PI, false);ctx.fill();ctx.beginPath();ctx.arc(52, 30, 7, 0, 2*Math.PI, false);ctx.fillStyle = "rgb(0, 0, 0)";ctx.fill();ctx.beginPath();ctx.arc(100, 52, 5, 0, 2*Math.PI, false);ctx.fillStyle = "rgb(0, 0, 0)";ctx.fill();ctx.beginPath();ctx.arc(150, 52, 5, 0, 2*Math.PI, false);ctx.fillStyle = "rgb(0, 0, 0)";ctx.fill();ctx.beginPath();ctx.arc(200, 52, 5, 0, 2*Math.PI, false);ctx.fillStyle = "rgb(0, 0, 0)";ctx.fill();
Výsledek: