VML非零绕组

Question

我试图用HTML画布绘制复杂的多边形。我必须决定“奇数”或“非零”的缠绕规则。默认情况下，浏览器应用非零绕组规则。在IE11+等主要浏览器中，缠绕规则可以更改为奇数.

我希望这在旧的浏览器(支持IE8+)上也是一致的。既然在IE9和IE10中似乎没有改变缠绕规则的方法，我想问的是，是否有一种方法可以改变IE8的缠绕规则。

我将excanvas.js用于IE8。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>

​

奇数/非零

​

​

Answer 1

我想问的是，是否有办法改变IE8的绕组填充规则？

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

您可以通过分别呈现每个子路径来解决其中的一些问题。当然，当路径依赖于它们以获得最终结果时，这可能会在另一端引入其他问题。