# Canvas

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

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

Canvas 实例，可通过 [SelectorQuery](/miniprogram/dev/api/wxml/SelectorQuery) 获取。

## 属性

### number width

画布宽度

### number height

画布高度

## 方法

### [RenderingContext Canvas.getContext(string contextType)](/miniprogram/dev/api/canvas/Canvas.getContext)

该方法返回 Canvas 的绘图上下文

### [Image Canvas.createImage()](/miniprogram/dev/api/canvas/Canvas.createImage)

创建一个图片对象。 支持在 2D Canvas 和 WebGL Canvas 下使用, 但不支持混用 2D 和 WebGL 的方法。

### [ImageData Canvas.createImageData()](/miniprogram/dev/api/canvas/Canvas.createImageData)

创建一个 ImageData 对象。仅支持在 2D Canvas 中使用。

### [Path2D Canvas.createPath2D(Path2D path)](/miniprogram/dev/api/canvas/Canvas.createPath2D)

创建 Path2D 对象

### [number Canvas.requestAnimationFrame(function callback)](/miniprogram/dev/api/canvas/Canvas.requestAnimationFrame)

在下次进行重绘时执行。 支持在 2D Canvas 和 WebGL Canvas 下使用, 但不支持混用 2D 和 WebGL 的方法。

### [Canvas.cancelAnimationFrame(number requestID)](/miniprogram/dev/api/canvas/Canvas.cancelAnimationFrame)

取消由 requestAnimationFrame 添加到计划中的动画帧请求。支持在 2D Canvas 和 WebGL Canvas 下使用, 但不支持混用 2D 和 WebGL 的方法。

### [string Canvas.toDataURL(string type, number encoderOptions)](/miniprogram/dev/api/canvas/Canvas.toDataURL)

返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。

## 示例代码

2D Canvas 示例
[在开发者工具中预览效果](https://developers.weixin.qq.com/s/SHfgCmmq7UcM)

WebGL 示例
[在开发者工具中预览效果](https://developers.weixin.qq.com/s/qEGUOqmf7T8z)