CanvasRenderingContext2D.fill()

了解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[.
=[.

实时效果如下：

其他

规范文档

相关资源

暂无

兼容性

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