HTML5的剪纸效果-圆形

浏览数：29 / 时间：2015年06月09日

开始之前我们要会“非零环绕规则”的原理，其实也简单，可以百度，我这里简单介绍下，

非零环绕数规则（Nonzero Winding Number Rule）：若环绕数为0表示在多边形内，非零表示在多边形外
首先使多边形的边变为矢量。将环绕数初始化为零。再从任意位置p作一条射线。当从p点沿射线方向移动时，对在每个方向上穿过射线的边计数，每当多边形的边从右到左穿过射线时，环绕数加1，从左到右时，环绕数减1。处理完多边形的所有相关边之后，若环绕数为非零，则p为内部点，否则，p是外部点。

如图所示，我们要判断点P是否在多边形内，如何判断？原理如下：

判断点p是否在多边形内，从点p向外做一条射线（可以任意方向），多边形的边从左到右经过射线时环数减1，多边形的边从右往左经过射线时环数加1，最后环数不为0，即表示在多边形内部，为0表示在多边形外。

也就是我们在画图的时候，不管是多边还是圆形，不都有一个顺序，不是顺时针就是逆时针，就这就是“非零环绕规则“的原理了。

那么在html中剪纸的依据是什么呢？

剪纸说白了就是html5的填充效果，有的地方填有的地方不填而已。在html5中用的是fill()这个方法，在调用的时候，如果计算的值是0那么不在区域内不填充，不为0在区域内填充。

说了原理，那么我们可以看看效果，比如我们画个圆的时候，用了html5的arc的时候，只对圆进行描边stroke,那么效果如图，

就是一个图，没什么大不了，那么我们开始进行填充了，使用fill()了哦，注意哦，这个时候我们选一个点P，如图：

看射线和相交点哦，如图：

看到了吧，那么我们就要开始算了，工具”非零环绕规则“，这个应该会很奇怪我们怎么没有标明方向呀。是的，应该标明方向，

我们看下标明方向哦，

context.arc(x,y,r,sAngle,eAngle,counterclockwise);
counterclockwise表示的就是方向哦，怎么用不解释了，当为fasle的时候，我们知道表示顺时，那么计算结果为1，为true的时候表示逆时，计算结果也是1。好吧，不为0浏览器只好把你填充了兄弟，于是就是这样了：

代码如下：很简单吧，这里是不是对fill()这个html5方法有了进一步的了解了，是的话，那就值了。

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.fillStyle=‘rgba(100, 145, 250, 0.3)‘;
ctx.fill();
ctx.stroke();

</script>

</body>
</html>

剪纸的效果，原理都一样，接下来也不怎么介绍了。自己动手丰衣足食吧，画两个圆，里面一个外面一个，那么对于这个效果就熟悉了，我就不介绍了。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

HTML5的剪纸效果-圆形