キャンバス要素のSVG偶数塗りつぶし規則の使用

Question

HTML5キャンバス要素のSVGからevenoddfill-ruleを実装するには、ネイティブまたは数学的にJavaScriptを使用できますか？これを行うプロジェクトへのリンクが役立ちます。

Answer 1

はい、globalCompositeOperationで可能です。私が間違っていない場合、デフォルトの "ソースオーバー"値はSVGの "evenodd"に対応する必要があります（そうでない場合は他のものを少し試して、結果のイメージが同じかどうかを確認してください）。

Answer 2

数学的には、アルゴリズムの実装を意味しますか？確かに可能です。http://gpolo.awardspace.info/fill/main.htmlを参照してください。それは何よりもデモですが、この問題を「数学的に」解決します。

Answer 3

私は同じ質問をしてthis Mozilla Bugreportに出くわしました。それはbugreportersでWHATWG（キャンバス仕様）に提案されますよう

は思え：

クリス・ジョーンズ、2011年6月10日：

この仕様は固体で見られるまでのは、ドキュメントを待ちましょうwhatwg（今日は投稿します）。物事が一度に異なっている必要がありますが、長い時間前から、あなたはfill()メソッドにfillruleパラメータを渡すことができますので、本当に古い質問だ

Answer 4

。 このfillruleは、"nonzero"（デフォルト）または"evenodd"のいずれかです。

var ctx = c.getContext('2d'); 
 
drawPath(); 
 
ctx.fill(); 
 
ctx.translate(70, 0); 
 
drawPath(); 
 
ctx.fill('evenodd'); 
 
ctx.translate(70, 0); 
 
drawPath(); 
 
ctx.stroke(); 
 

 
function drawPath(){ 
 
    ctx.beginPath(); 
 
    ctx.arc(30,30,20,0,Math.PI*2); 
 
    ctx.lineTo(60,60); 
 
    ctx.lineTo(0,0); 
 
    ctx.closePath(); 
 
}

<canvas id="c"></canvas>