Principle of non-zero surround rules in Canvas

Principle of non-zero surround rules in Canvas

Non-zero surround rule: for a specified range area in a path, draw a long enough line segment from the area so that the line segment completely falls out of the path range.

Non-zero surround rule counter:
Then, the counter is initialized to 0. Whenever the line segment and the straight line or curve in the path intersect, the counter value is changed. If it is a clockwise intersection with the path, then the counter is added with 1. If it is a counter that matches the path counterclockwise, the counter is reduced by 1.
If the counter is always not 0, this area is in the path range. When the fill () method is called, the browser fills it in. If the final value is 0, this region is not in the path range, and the browser will not fill it.

See
The first line segment: According to the non-zero surround rule, this line only goes through the path once and the path is counter-clockwise, then the counter is-1. According to the calculation principle of the browser's counter, when fill () is called () the browser will fill this area.

The second line segment: According to the non-zero surround rule, the counter is-2 when this line goes through the second path and the path is in the clockwise direction. According to the calculation principle of the browser's counter, when fill () is called () the browser will fill this area.

Line Segment 3: According to the non-zero surround rule, this line goes through the second path. The first path goes through the clockwise direction, and the counter goes through the-1 path. The second path goes through the clockwise direction, the counter is 1; the final value of the counter is 0-1 + 1 = 0; therefore, according to the browser's calculation principle of the counter, when fill () is called () the browser does not fill this area.

Based on the above principle, this example shows how to draw a circular graph.

For example:

Instance code:
 

    <style type="text/css">      canvas {          border:1px solid #e5e5e5;      }      </style>      <canvas id="firstCanvas" width="400" height="400"> Canvas not supported </canvas>            <script type="text/javascript">      var canvas  = document.getElementById("firstCanvas"),          context = canvas.getContext && canvas.getContext("2d");            context.fillStyle = "#ff6600";            // clear current subPath      context.beginPath();      // outer circle      context.arc(200, 200, 100, 0, Math.PI * 2, true);      // inner circle      context.arc(200, 200, 50,  0, Math.PI * 2, false);      context.fill();             </script>