【绘制】HTML5 Canvas 剪纸效果（镂空效果）

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

圆环剪纸

我们运用所学到的路径、阴影与非零环绕规则等知识，实现如图圆环剪纸(cutout)效果。

这是用JavaScript代码创建一条路径，一个圆在另一个内部，通过设定arc()最后一个参数值，以顺时针方向绘制内部的圆形，并且以逆时针方向绘制了外围的圆形。

相关演示 详细代码

这便是利用了非零环绕规则，计数器为0导致不填充内圆，如果将两个圆路径arc()的最后一个参数设定为相同的值，则会出现下面的形状：

此时非零环绕规则计数器不为0，内圆被填充。

我们注意到两幅图中右侧有一根横线，根据Canvas规范，使用arc()方法向当前路径添加子路径时，该方法必须将上一条子路径的终点与所画圆弧的起点相连。一般情况下，我们并不想要留下那根线，所以可以在arc绘制之前，调用beginPath()来清除之前的子路径。

另外我们发现这里面有个浅白色的圆线，这个是我们使用了stroke()导致的，主要也是为了引出横线的问题。

其他剪纸图形

我们先看一下下面的示例

在线演示 

详细代码

我们可以看到，矩形内绘制了三个图形，一个矩形，一个三角形，一个圆形，其实这也是利用非零环绕规则做出的效果。

在这里你可能会疑问：rect没有路径方向参数，怎么能通过不同路径方向填充实现镂空？

因为rect()总是按照顺时针方向绘制，其实这里我重写了rect()的方法，并增加了一个可以控制方向的参数。

function rect(x,y,w,h,direction) {
        if(direction){//CCW
            context.moveTo(x,y);
            context.lineTo(x,y+h);
            context.lineTo(x+w,y+h);
            context.lineTo(x+w,y);
            context.closePath();
        }else{
            context.moveTo(x,y);
            context.lineTo(x + w, y);
            context.lineTo(x + w, y + h);
            context.lineTo(x, y + h);
            context.closePath();
        }
    }

通过传入最后一个布尔类型参数，设定路径方向。在上图的代码示例中，只有外框是顺时针绘制，里面的三个图形都是按照逆时针路径绘制的，所以填充之后展现为镂空形状。为了使镂空效果更加逼真，特地加上偏移阴影，效果可以通过上述链接在线访问。