canvasrenderingcontext2d.clip(string fillrule)
基础库 或更高版本； 若版本较低，建议采取 兼容处理。
小程序开发者工具： 支持。 path2d 需要 ide 3.8.2 及以上版本支持。
主体： 企业支付宝小程序 、 个人支付宝小程序
使用当前路径，或指定的 path2d 路径剪切画布。
剪切之后，所有的绘图都将限制在被剪切的区域内。可以在使用 clip 方法前通过使用 save 方法对当前画布区域进行保存，并在以后的任意时间通过 restore 方法对其进行恢复。
此 api 支持两种用法：
canvasrenderingcontext2d.clip(string fillrule)
canvasrenderingcontext2d.clip(path2d path, string fillrule)
效果示例
代码示例执行效果
原图
裁剪后
path2d path
指定裁剪的路径。可选。不传将使用当前路径裁剪画布。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')
let img = canvas.createimage()
img.src = 'https://mdn.alipayobjects.com/huamei_esgcm9/afts/img/a*vlkfqkogboqaaaaaaaaaaaaadsajaq/original'
img.onload = () => {
ctx.save()
ctx.beginpath()
// 构造圆形路径
ctx.arc(145, 75, 60, 0, 2 * math.pi)
// 使用圆形路径剪切画布
ctx.clip()
ctx.beginpath()
// 构造方形路径
ctx.rect(95, 25, 100, 100)
// 使用方形路径再次剪切画布
ctx.clip()
// 画支付宝 logo，绘制将限制在裁剪区域内
ctx.drawimage(img, 85, 10, 130, 130)
// 恢复保存的绘图上下文，后续绘制不再限于剪切区域
ctx.restore()
}
})
},
})
<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.arc(145, 75, 60, 0, 2 * math.pi)
// 方形路径
let p2 = ctx.createpath2d()
p2.rect(95, 25, 100, 100)
let img = canvas.createimage()
img.src = 'https://mdn.alipayobjects.com/huamei_esgcm9/afts/img/a*vlkfqkogboqaaaaaaaaaaaaadsajaq/original'
img.onload = () => {
ctx.save()
ctx.clip(p1)
ctx.clip(p2)
// 画支付宝 logo，绘制将限制在裁剪区域内
ctx.drawimage(img, 85, 10, 130, 130)
// 恢复保存的绘图上下文，后续绘制不再限于剪切区域
ctx.restore()
}
})
},
})
<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 img = canvas.createimage()
img.src = 'https://mdn.alipayobjects.com/huamei_esgcm9/afts/img/a*vlkfqkogboqaaaaaaaaaaaaadsajaq/original'
img.onload = () => {
ctx.save()
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.clip('nonzero')
ctx.