VML非零绕组答案

【问题标题】：VML non-zero windingVML非零绕组
【发布时间】：2016-06-14 03:19:14
【问题描述】：

我正在尝试使用 HTML 画布绘制复杂的多边形。我必须决定“奇偶”或“非零”缠绕规则。浏览器默认应用非零缠绕规则。在 IE11+ 和其他主要浏览器中，缠绕规则可以更改为奇偶。

我希望这在旧浏览器上也能保持一致（支持 IE8+）。现在由于似乎没有办法改变 IE9 和 IE10 中的缠绕规则，我想问是否有办法改变 IE8 的缠绕规则。

我正在为 IE8 使用 excanvas.js。 Excanvas.js 使用 VML 形状来模拟画布上的形状，并默认应用奇偶规则。有没有办法将 VML 形状的绕组更改为非零规则？

一个fiddle 一起玩。

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();

&lt;canvas width="250" height="250" id="canvas"&gt;&lt;/canvas&gt;

奇偶/非零

【问题讨论】：

标签： javascript canvas internet-explorer-8 vml excanvas

【解决方案1】：

我问是否有办法改变 IE8 的缠绕 [填充规则]？

VML standard 不允许定义填充规则，因此奇偶是唯一的选择。

您可以通过分别渲染每个子路径来解决一些问题。当路径取决于最终结果时，这当然可能会在另一端引入其他问题。

【讨论】：

好像是这样。我将不得不接受这一点并继续前进。我也考虑过单独渲染子路径，但似乎不太合理。无论如何，谢谢。