Od provozovatele projektu Rychlost.CZ

fill

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 .

Syntaxe

CanvasRenderingContext2D.fill(pravidloVyplňování,path)

ParametrPopis
pravidloVyplňováníAlgoritmus určující jakým stylem se má objekt vyplňovat. Možné hodnoty jsou "nonzero" (defaultní) nebo "evenodd".
path2D cesta pro vyplnění
Ukázka:
Javascript
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:

Podpora webových prohlížečů

Firefoxano
Internet Explorerversion: 9
Google Chromeano
Safariano
Operaano