title: Canvas

sidebar_label: Canvas

Canvas 实例，可通过 SelectorQuery 获取。

参考文档

方法

参数 类型 说明
height number 画布高度
width number 画布宽度

cancelAnimationFrame

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

支持情况：Canvas - 图1 Canvas - 图2 Canvas - 图3

参考文档

  1. (requestID: number) => void
参数 类型
requestID number

createImageData

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

支持情况：Canvas - 图4 Canvas - 图5 Canvas - 图6

参考文档

  1. () => ImageData

createImage

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

支持情况：Canvas - 图7 Canvas - 图8 Canvas - 图9

参考文档

  1. () => Image

createPath2D

创建 Path2D 对象

支持情况：Canvas - 图10 Canvas - 图11 Canvas - 图12

参考文档

  1. (path: Path2D) => Path2D
参数 类型
path Path2D

getContext

支持获取 2D 和 WebGL 绘图上下文

支持情况：Canvas - 图13 Canvas - 图14 Canvas - 图15

参考文档

  1. (contextType: string) => RenderingContext
参数 类型
contextType string

requestAnimationFrame

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

支持情况：Canvas - 图16 Canvas - 图17 Canvas - 图18

参考文档

  1. (callback: (...args: any[]) => any) => number
参数 类型 说明
callback (...args: any[]) => any 执行的 callback

toDataURL

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

支持情况：Canvas - 图19 Canvas - 图20 Canvas - 图21

参考文档

  1. (type: string, encoderOptions: number) => string
参数 类型 说明
type string 图片格式，默认为 image/png
encoderOptions number 在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。

API 支持度

API 微信小程序 H5 React Native
Canvas.cancelAnimationFrame ✔️
Canvas.createImageData ✔️
Canvas.createImage ✔️
Canvas.createPath2D ✔️
Canvas.getContext ✔️
Canvas.requestAnimationFrame ✔️
Canvas.toDataURL ✔️