了解CanvasRenderingContext2D.clip()

    简介

    先绘制剪裁路径，执行clip()方法，再绘制的内容就在这个剪裁路径中呈现。，CanvasRenderingContext2D.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)(

    实时效果如下：

    其他

    规范文档

    规范地址 规范状态 备注
    HTML现行标准
    这个规范中定义了'CanvasRenderingContext2D.clip'         		现行标准 -

    相关资源

    兼容性

    特性 确认支持 备注
    clip(), clip(fillRule) IE9+支持，全兼容。 -
    clip(path, fillRule) IE浏览器不支持。 因为IE浏览器不支持Path2D对象。

    by zhangxinxu 2019-10-18 01:44:03

     返回顶部