了解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)(

    实时效果如下:

    其他

    规范文档

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

    相关资源

    兼容性

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

    by zhangxinxu 2018-10-15 23:54:32