canvascontext.clip()
主体: 企业支付宝小程序 、 个人支付宝小程序
相关文档: 旧版 canvas 迁移指南
canvascontext.clip 使用当前路径剪切画布。
剪切之后,所有的绘图都将限制在被剪切的区域内。可以在使用 clip 方法前通过使用 方法对当前画布区域进行保存,并在以后的任意时间通过 方法对其进行恢复。
代码示例
.js
.axml
const ctx = my.createcanvascontext('canvas')
my.downloadfile({
url: 'https://mdn.alipayobjects.com/huamei_esgcm9/afts/img/a*vlkfqkogboqaaaaaaaaaaaaadsajaq/original',
success(res) {
let path = res.apfilepath
// 保存绘图上下文
ctx.save()
ctx.beginpath()
// 构造圆形路径
ctx.arc(150, 75, 75, 0, 2 * math.pi)
// 使用圆形路径剪切画布
ctx.clip()
ctx.beginpath()
// 构造方形路径
ctx.rect(85, 10, 130, 130)
// 使用方形路径再次剪切画布
ctx.clip()
// 画支付宝 logo,绘制将限制在裁剪区域内
ctx.drawimage(path, 85, 10, 130, 130)
// 恢复保存的绘图上下文,后续绘制不再限于剪切区域
ctx.restore()
// ...
ctx.draw()
}
})
<canvas id="canvas">canvas>
裁剪图片对比
原图
裁剪后的图片