Zielony Smok

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. Reguły te zostały opisane w książce.

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.

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

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);
    

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

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);