# CanvasContext.clip()

CanvasContext 是旧版的接口，新版 [Canvas 2D](/miniprogram/dev/component/canvas.md) 接口与 Web 一致

从基础库 [2.9.0](1003706) 开始，本接口停止维护，请使用 [RenderingContext](/miniprogram/dev/api/canvas/RenderingContext) 代替

> 基础库 1.6.0 开始支持，低版本需做[兼容处理](1003706)。

> __小程序插件__：支持

> 相关文档: [旧版画布迁移指南](/miniprogram/dev/framework/ability/canvas-legacy-migration.md)、[canvas 组件介绍](/miniprogram/dev/component/canvas.md)

## 功能描述

从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。可以在使用 `clip` 方法前通过使用 `save` 方法对当前画布区域进行保存，并在以后的任意时间通过`restore`方法对其进行恢复。

## 示例代码

```javascript
const ctx = wx.createCanvasContext('myCanvas')

wx.downloadFile({
  url: 'http://is5.mzstatic.com/image/thumb/Purple128/v4/75/3b/90/753b907c-b7fb-5877-215a-759bd73691a4/source/50x50bb.jpg',
  success: function(res) {
    ctx.save()
    ctx.beginPath()
    ctx.arc(50, 50, 25, 0, 2*Math.PI)
    ctx.clip()
    ctx.drawImage(res.tempFilePath, 25, 25)
    ctx.restore()
    ctx.draw()
  }
})
```
![](@program/dev/image/canvas/clip.png)