HTML5 Canvas 提供的 clip 可将当前创建的路径设置为当前裁剪路径的方法。

绘制路径后裁切

裁切方法：

// 把已经创建的路径转换成裁剪路径
context.clip();

context.clip(fillRule);

context.clip(path, fillRule);

// 参数：
// fillRule：这个算法判断一个点是在路径内还是在路径外。
// 可选的值：
// "nonzero": 非零环绕原则，默认的原则。
// "evenodd": 奇偶环绕原则。
// path：需要剪切的 Path2D 路径。

示例：

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");

var image = new Image();
image.src = "http://cdn.zdyla.com/upload/post/ca10ac99-8e02-4c9d-b112-c4a4c7264665.jpeg"
image.onload = function (){
    ctx.drawImage(image,20,20,160,160);
}

ctx.beginPath();
ctx.arc(100,100, 80, 0, Math.PI * 2);
ctx.clip();

使用 Path2D 对象提供的路径来裁切

Path2D 允许我们在 canvas 中创建可以保留并重用的路径。

以上示例可以改写为：

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");

var image = new Image();
image.src = "http://cdn.zdyla.com/upload/post/ca10ac99-8e02-4c9d-b112-c4a4c7264665.jpeg"
image.onload = function (){
    ctx.drawImage(image,20,20,160,160);
}

var path = new Path2D();
path.arc(100,100, 80, 0, Math.PI * 2);
ctx.clip(path);