The "non-zero surround rule" used to fill the path.

The "non-zero surround rule" used to fill the path.

When I was busy, I took some time to read canvas. Today I saw the "non-zero surround rule". I wrote the demo in the book with curiosity and looked at the effect, it seems quite practical.

Let's briefly talk about the principle of "non-zero surround Rules" (basically from books): If the drawing path is circular or contains multiple intersection sub-paths, therefore, the drawing environment variables of canvas must be determined. When the fill () method is called, how should we fill the current path. Canvas uses a non-zero surround rule when filling in a cross-path ". "The non-zero surround rule is used to determine the path of self-crossover: For any given area of the path, draw a long enough line segment from inside the area, make the end point of this line segment completely out of the path range.

Next, initialize the counter to 0, and then change the counter value whenever the line segment and the straight line or curve on the path intersect. (Here is the focus) if it is the clockwise part of the path intersection, add 1, if it is the counterclockwise part of the path intersection, then minus 1. if the counter value is not 0, then this region is in the path (here we can understand it). When calling the fill () method, the browser will fill it. If the final value is 0, this region will not be inside the path, and the browser will not fill it.

You can see that this is almost clear, that is, you can determine whether the region will be filled by the final count value of the path through the region. The following is a small demo.

1 var canvas = document. getElementById ('canvas '); 2 var context = canvas. getContext ('2d '); 3 function drawTwoArcs () {4 context. beginPath (); 5 context. arc( 300,190,150, 0, Math. PI * 2, false); // 6 context clockwise. arc( 300,190,100, 0, Math. PI * 2, true); // counter-clockwise 7 8 context. fill (); 9 context. stroke (); 10} 11 12 function draw () {13 context. clearRect (0, 0, context. canvas. width, context. canvas. height); 14 context. save (); 15 context. shadowColor = "rgba (0,0, 0, 0.8)"; 16 context. shadowOffsetX = 12; 17 context. shadowOffsetY = 12; 18 context. shadowBlur = 15; 19 20 drawTwoArcs (); 21 context. restore (); 22} 23 24 context. fillStyle = "rgba (100,140,230, 0.5)"; 25 context. strokeStyle = context. fillStyle; 26 draw ();

In this demo, two concentric circles are drawn, and the internal circles are drawn clockwise. The external circles are drawn counterclockwise. When the program fills the external circles, the browser uses the "non-zero surround rule" for filling judgment. We draw a straight line from the inner of the inner layer circle, which will intersection the path twice. The draw direction of the two circles is different. Therefore, the final counting value of the line derived from the inner layer circle is 0, the circle in the lower layer won't be filled. Similarly, we can get the section between the outer circle and the lower layer circle will be filled, and a paper-cut pattern will be produced, but the effect is still pretty ).

: