canvasrenderingcontext2d.fill(string fillrule)
基础库 或更高版本； 若版本较低，建议采取 兼容处理。
小程序开发者工具： 支持。 path2d 于 3.8.2 及以上版本支持。
主体： 企业支付宝小程序 、 个人支付宝小程序
根据 fillstyle 填充当前路径或指定 path2d 路径。
此方法会填充所有子路径。对于未闭合的子路径，会将其当做起点和终点相连的闭合路径填充，但不会真正将路径闭合。
此 api 有两种用法：
fill(string fillrule)
fill(path2d path, string fillrule)
效果示例
代码示例执行效果
path2d path
指定填充的 path2d 路径。不传入将会填充当前路径。ide 于 3.8.2 及以上版本支持。
string fillrule
填充规则，用于判断一个点是否在填充区域内。可选，默认为 nonzero。
| 枚举值 | 描述 | 兼容性 |
|---|---|---|
| nonzero | - | |
| evenodd | - |
填充当前路径
填充指定 path2d 路径
填充规则
.js
.axml
page({
oncanvasready() {
my.createselectorquery().select('#canvas').node().exec((res) => {
const canvas = res[0].node
const ctx = canvas.getcontext('2d')
// 创建未闭合的子路径
ctx.moveto(10, 10)
ctx.lineto(10, 50)
ctx.lineto(50, 50)
ctx.moveto(70, 50)
ctx.lineto(120, 50)
ctx.lineto(120, 100)
// 创建闭合的矩形子路径
ctx.rect(10, 70, 50, 30)
// 填充当前路径
ctx.fill()
})
}
})<canvas id="canvas" type="2d" onready="oncanvasready">canvas>.js
.axml
page({
oncanvasready() {
my.createselectorquery().select('#canvas').node().exec((res) => {
const canvas = res[0].node
const ctx = canvas.getcontext('2d')
let p1 = ctx.createpath2d()
// 创建未闭合的子路径
p1.moveto(10, 10)
p1.lineto(10, 50)
p1.lineto(50, 50)
p1.moveto(70, 50)
p1.lineto(120, 50)
p1.lineto(120, 100)
let p2 = ctx.createpath2d()
// 创建闭合的矩形子路径
p2.rect(10, 70, 50, 30)
// 填充指定 path2d 路径
ctx.fill(p1)
ctx.fill(p2)
})
}
})<canvas id="canvas" type="2d" onready="oncanvasready">canvas>.js
.axml
page({
oncanvasready() {
my.createselectorquery().select('#canvas').node().exec((res) => {
const canvas = res[0].node
const ctx = canvas.getcontext('2d')
ctx.moveto(30, 70)
ctx.lineto(70, 30)
ctx.lineto(60, 100)
ctx.lineto(30, 20)
ctx.lineto(90, 80)
ctx.closepath()
ctx.fill('evenodd')
ctx.beginpath()
ctx.moveto(90, 70)
ctx.lineto(130, 30)
ctx.lineto(120, 100)
ctx.lineto(90, 20)
ctx.lineto(150, 80)
ctx.closepath()
ctx.fill('nonzero')
})
}
})<canvas id="canvas" type="2d" onready="oncanvasready">canvas>代码示例执行效果
evenodd
nonzero