CanvasRenderingContext2D.clip()

了解CanvasRenderingContext2D.clip()

简介

CanvasRenderingContext2D.clip()表示路径剪裁。使用时候，执行clip()方法，再绘制的内容就在这个剪裁路径中呈现。，先绘制剪裁路径

语法

context.clip();
context.clip(fillRule);
context.clip(path, fillRule);

参数

各个参数含义和作用如下：

fillRule

String

填充规则。用来确定一个点实在路径内还是路径外。可选值包括：

• nonzero：非零规则。此乃默认规则。
• evenodd：奇偶规则。

关于'nonzero'和'evenodd'规则可参见这篇文章。

path

Object

指Path2D对象。

案例

利用剪裁实现一个图案填充效果。实现图案填充，标准用法是创建一个Pattern对象，然后作为fillStyle进行路径填充。这里，我们还可以使用clip()剪裁实现，这样就不用new一个Pattern对象了。例如，实现一个三角形，里面是人物照片图案。代码如下：

var context = canvas.getContext('2d');
// 需要图片先加载完毕
var img = new Image();
img.onload = function () {
    // 剪裁路径是三角形
    context.beginPath();
    context.moveTo(20, 20);
    context.lineTo(200, 80);
    context.lineTo(110, 150);
    // 剪裁
    context.clip();
    // 填充图片
    context.drawImage(img, 0, 0, 250, 167);
};
img.src = './1.jpg';

实时效果如下：

其他

规范文档

相关资源

• 搞懂SVG/Canvas中nonzero和evenodd填充规则

兼容性

最近更新：by zhangxinxu 2019-10-18 01:44:03