HTML5 canvas – winding rule
Winding rule albo inaczej fill rule określa zasady wypełniania ścieżek.
Jeżeli powierzchnia jest na ścieżce zostanie wypełniona, jeżeli jest poza ścieżką – nie zostanie wypełniona.
Istnieją dwie reguły even-odd oraz nonzero ustalania czy powierzchnia leży na ścieżce czy nie.
Na HTML canvas nie ma możliwości wyboru reguły. Domyślnie jest ustawiona reguła nonzero.
To stwarza nowe możliwości.
W przykładzie pierwszym oba koła są rysowane w kierunku przeciwnym do kierunku ruchu wskazówek zegara. W przykładzie drugim, drugie koło jest rysowane w kierunku ruchu wskazówek zegara.
Powierzchnie do wypełnienia są liczone odmiennie i efekt jest odmienny.
Podany sposób jest jedynym sposobem wycinania figur, tak aby widoczne było tło. Oczywiście pierścień można narysować inaczej, ale tylko dlatego, że jest to wyjątkowo prosty, symetryczny przykład. Aby się przekonać wystarczy przesunąć nieco drugie koło.
Podobnie będzie gdy druga figura będzie trójkątem. To czy będzie wypełniona czy nie zależy od kierunku rysowania trójkąta.
Is point (170, 170) in path?:
Listing
var cv = document.getElementById("canvas");
var ctx = cv.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.arc(170, 170, 150, 0, Math.PI*2, true);
ctx.arc(170, 170, 100, 0, Math.PI*2, true);
ctx.fill();
result.innerText = ctx.isPointInPath(170, 170);
Is point (170, 170) in path?:
Listing
var cv1 = document.getElementById("canvas1");
var ctx1 = cv1.getContext("2d");
ctx1.beginPath();
ctx1.fillStyle = "blue";
ctx1.arc(170, 170, 150, 0, Math.PI*2, true);
ctx1.arc(170, 170, 100, 0, Math.PI*2, false);
ctx1.fill();
result1.innerText = ctx1.isPointInPath(170, 170);