HTML キャンバスで複雑なポリゴンを描画しようとしています。「偶奇」または「非ゼロ」のどちらかの巻線ルールを決定する必要があります。ブラウザは、デフォルトでゼロ以外のワインディング ルールを適用します。IE11+ およびその他の主要なブラウザーでは、ワインディング ルールを偶奇に変更できます。
これを古いブラウザー (IE8+ をサポート) でも一貫させたいと考えています。現在、IE9とIE10では巻き方のルールを変更する方法がないようですので、IE8で巻き方を変更する方法があればお願いしたいです。
IE8 用の excanvas.js を使用しています。Excanvas.js は VML 形状を使用してキャンバス上の形状をシミュレートし、デフォルトで偶奇規則を適用します。VML シェイプの巻線を非ゼロ ルールに変更する方法はありますか?
遊ぶためのフィドル。
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(111, 108), context.lineTo(112, 141), context.lineTo(155, 143), context.lineTo(140, 171), context.lineTo(113, 170), context.lineTo(92, 168), context.lineTo(80, 142), context.lineTo(79, 117), context.lineTo(82, 86), context.lineTo(103, 75), context.lineTo(131, 67), context.lineTo(179, 67), context.lineTo(177, 55), context.lineTo(122, 39), context.lineTo(93, 45), context.lineTo(60, 57), context.lineTo(41, 79), context.lineTo(36, 108), context.lineTo(43, 149), context.lineTo(65, 187), context.lineTo(104, 203), context.lineTo(146, 206), context.lineTo(173, 190), context.lineTo(187, 160), context.lineTo(195, 115), context.lineTo(152, 110)
context.closePath();
context.moveTo(44, 50), context.lineTo(90, 66), context.lineTo(61, 27)
context.closePath();
// Use either nonzero or evenodd
//context.fill("nonzero");
//context.fill("evenodd");
context.fill();<canvas width="250" height="250" id="canvas"></canvas>偶奇 / 非ゼロ
