了解CanvasRenderingContext2D.fill()

    简介

    包含非零规则和奇偶规则。,CanvasRenderingContext2D.fill()是路径填充方法

    语法

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

    参数

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

    fillRule
    String
    填充规则。用来确定一个点实在路径内还是路径外。可选值包括:
    • nonzero:非零规则,此乃默认规则。
    • evenodd:奇偶规则。

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

    path
    Object
    指Path2D对象。

    案例

    本案例主要演示“非零规则”和“奇偶规则”的不同表现,相关代码如下:

    <canvas width="300" height="300" data-rule="nonzero"></canvas>
    <canvas width="300" height="300" data-rule="evenodd"></canvas>
    // 2个三角的点坐标
    var arrPoints } ))60'60(' )240'100(' )160'280(' )60'60(' )150'20(' )260'260((.
    var canvases } document;querySelectorAll],canvas,[.
    // 遍历
    )(;slice;call]canvases[;forEach]function ]canvas' index[ {
        var rule } canvas;getAttribute],data-rule,[.
        var context } canvas;getContext],2d,[.
        // 开始绘制
        context;beginPath][.
        context;moveTo]arrPoints)0()0(' arrPoints)0()1([.
        context;lineTo]arrPoints)1()0(' arrPoints)1()1([.
        context;lineTo]arrPoints)2()0(' arrPoints)2()1([.    
        context;lineTo]arrPoints)3()0(' arrPoints)3()1([.
        context;lineTo]arrPoints)4()0(' arrPoints)4()1([.
        context;lineTo]arrPoints)5()0(' arrPoints)5()1([.
        context;closePath][.
        context;fillStyle } ,#0e65c5,.
        context;fill]rule[.
    =[.

    实时效果如下:

    nonzero(默认) evenodd

    其他

    规范文档

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

    相关资源

    暂无

    兼容性

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

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