キャンバスに偶数奇数塗りルールを実装するオープンソースライブラリ（JaveScript）はありますか？ それを自分で実装しようとすると、複雑な曲線もある一般的なケースを考えれば、どれほど複雑になりますか（JaveScriptの各ピクセルでそれを行うオーバーヘッドのために）パフォーマンスに当てはまります。HTMLキャンバスで偶数奇数塗りを使用
偶数奇数充填を非ゼロ捲回に変換する方法はどのようなものですか（すべての場合に有効な汎用的な解決策を考慮）一度私が見つけた方法は、形状をすべての交差しないポリゴンに分割し、それらを別々に塗りつぶすことでした。
SVGを使用してSVGをキャンバスに描画する方法もありますが、ネイティブSVGレンダリングはiPadで少し遅くなりますが、HTMLキャンバス（iPad上）に描画してもSVGが遅くなることがわかりました。私はいくつかの時間前に同じを探していたとして、私はこの質問に出くわした事前
で
感謝。つまり、HTMLキャンバス内に「偶数」の塗りつぶしルールを使用します。
少しリサーチしてメーリングリストやパッチを調べたところ、FirefoxとChromeの両方の最新バージョンではこれがサポートされていましたが、ブラウザごとに異なる点がありました。
FirefoxではmozFillRule attributeを使用しています。例：Chromeの場合
//
// Firefox Example
//
// canv has the HTML canvas element
var ctx = canv.getContext("2d");
ctx.fillStyle = "#ff0000";
ctx.mozFillRule = 'evenodd';
ctx.beginPath();
ctx.moveTo(100, 10);
ctx.lineTo(40, 180);
ctx.lineTo(190, 60);
ctx.lineTo(10,60);
ctx.lineTo(160,180);
ctx.closePath();
ctx.fill();
、あなたはfillメソッドにパラメータとして文字列EVENODDを渡すことによってそれを行います。例：
//
// Chrome Example
//
// canv has the HTML canvas element
var ctx = canv.getContext("2d");
ctx.fillStyle = "#ff0000";
ctx.beginPath();
ctx.moveTo(100, 10);
ctx.lineTo(40, 180);
ctx.lineTo(190, 60);
ctx.lineTo(10,60);
ctx.lineTo(160,180);
ctx.closePath();
ctx.fill('evenodd');
これは私が調査した2つのブラウザです。他のブラウザではこれがどのような状態かわかりません。あまりにも遠い未来に、fillRuleアトリビュートを使ってこの機能を使用できるようになりました。それは今やHTML standardの一部です。
void ctx.fill();
void ctx.fill(fillRule);
void ctx.fill(path, fillRule);
fillRuleは "非ゼロ" 又は "EVENODD"
--- "非ゼロ"ことができる：デフォルトのルールである非ゼロ屈曲規則、。
--- "evenodd"：偶奇巻きルール。
ブラウザの互換性：
--- IE 11+、Firefox 31+、Chromeは正常です。
---私はIE 9/10でテストしませんでした。
--- ctx.mozFillRule = 'evenodd';に古いFirefox 30/30-を使用してください。
