Canvas填充规则
当我们用到 fill（或者 [clip]和[isPointinPath] ）你可以选择一个填充规则，可以根据某处路径的外面或者里面来决定该处是否被填充着对于自建与自己路径相交或者路径被嵌套的时候是有用的
如果只是几个点圈起来的一个区域那么这两种规则没有区别
但是当发生线的焦点时就会呈现差异
两个值：
"nonzero": non-zero winding rule, 默认值.
onzero规则”顾名思意就是“非零规则”，用通俗的话讲，就算计算某些东西是不是0，如果不是0则内部，填充；如果是0则外部，不填充。
-
"evenodd": even-odd winding rule“evenodd规则”顾名思意就是“奇偶规则”，用通俗的话讲，就算计算某些东西是不是奇数，如果是是奇数则内部，填充；如果是偶数则外部，不填充。
nonzero规则和evenodd规则计算的东西还不一样，nonzero是计算顺时针逆时针数量，evenodd是交叉路径数量。
怎么判断
，在这个区域内任意找一个点，然后以这个点为起点，发射一条无限长的射线
-
对于nonzero规则：起始值为0，射线会和路径相交，如果路径方向和射线方向形成的是顺时针方向则+1，如果是逆时针方向则-1，最后如果数值为0，则是路径的外部；如果不是0，则是路径的内部，因此被称为“非0规则”。
-
对于evenodd规则：起始值为0，射线会和路径相交，每交叉一条路径，我们计数就+1，最后看我们的总计算数值，如果是奇数，则认为是路径内部，如果是偶数，则认为是路径外部。
小案例：
用填充规则evenodd
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body onload="draw();">
<canvas id="canvas" width="400" height="400"></canvas>
</body>
<script type="application/javascript">
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.beginPath();
ctx.arc(50, 50, 30, 0, Math.PI*2, true);
ctx.arc(50, 50, 15, 0, Math.PI*2, true);
ctx.fill("evenodd");
}
</script>
</html>
592
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
