Canvas 2D 非零和奇偶環繞規則

左爲奇偶環繞，右爲非零環繞

環境

2D圖形不一樣系統不一樣瀏覽器使用圖形庫可能都不同。

• chrome 使用的是 skia 圖形函數庫
• firefox 使用的是 cairo 圖形函數庫

skia 和 cairo 是對後端（backend）的封裝，因此能夠跨平臺，雖然 chrome 使用的圖形庫是 skia ，可是在不一樣系統上底層圖形庫仍是可能不同，好比默認系統：

• mac os是核心 Quartz 2D 圖形庫
• windows xp及如下版本底層引擎是使用 GDI 、 GDI+ ，Windows Vista後使用 Direct2D 

Windows Vista

在 canvas 和 svg 裏面進行填充渲染， CanvasRenderingContext2D.fill() 就是 Canvas 2D API 根據當前填充的樣式，填充當前或已經存在的路徑，採用 奇偶或非零環繞規則 。

奇偶（Even-odd Rule）

奇偶就是 路徑包圍的區域任意點P向外作一條射線，若是相交的邊總數是奇數填充，反之不填充 。

var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");

context.strokeStyle = "rgb(0,0,0)";
context.fillStyle = "rgb(250,0,0)"

context.beginPath();
context.moveTo(100, 0);
context.lineTo(100+Math.cos(Math.PI*3/10)*100, 100+Math.sin(Math.PI*3/10)*100);
context.lineTo(100-Math.cos(Math.PI*1/10)*100, 100-Math.sin(Math.PI*1/10)*100);
context.lineTo(100+Math.cos(Math.PI*1/10)*100, 100-Math.sin(Math.PI*1/10)*100);
context.lineTo(100-Math.cos(Math.PI*3/10)*100, 100+Math.sin(Math.PI*3/10)*100);
context.lineTo(100, 0);
context.fill('evenodd');
context.stroke();
context.closePath();

非零（Nonzero Rule）

非零就是 路徑包圍的區域任意點P向外作一條射線，環繞數爲0，若是相交的邊是從左向右環繞數減1，從右向左環繞數加1，環繞數不爲零填充，反之不填充 。

var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");

context.strokeStyle = "rgb(0,0,0)";
context.fillStyle = "rgb(250,0,0)"

context.beginPath();
context.moveTo(100, 0);
context.lineTo(100+Math.cos(Math.PI*3/10)*100, 100+Math.sin(Math.PI*3/10)*100);
context.lineTo(100-Math.cos(Math.PI*1/10)*100, 100-Math.sin(Math.PI*1/10)*100);
context.lineTo(100+Math.cos(Math.PI*1/10)*100, 100-Math.sin(Math.PI*1/10)*100);
context.lineTo(100-Math.cos(Math.PI*3/10)*100, 100+Math.sin(Math.PI*3/10)*100);
context.lineTo(100, 0);
context.fill('nonzero');
context.stroke();
context.closePath();

總結

爲何2種方式渲染出來的圖形不同？

由於 lineTo 默認按照順時針，沒法像 arc 方法同樣控制方向， 奇偶環繞時2個相交的邊，不填充，非零環繞相交2個從左向右的邊，是-2，填充