Canvas.toDataURL

基础库 2.11.0 开始支持,低版本需做兼容处理。

微信小程序插件:支持

相关文档: 画布指南、canvas 组件介绍

功能描述

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

参数

string type

图片格式,默认为 image/png

number encoderOptions

在指定图片格式为 image/jpeg 或 image/webp的情况下,可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围,将会使用默认值 0.92。其他参数会被忽略。

返回值

string

RenderingContextCanvas.getContext(string contextType)

基础库 2.7.0 开始支持,低版本需做兼容处理。

微信小程序插件:支持

相关文档: 画布指南、canvas 组件介绍

功能描述

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

参数

string contextType

上下文类型

contextType 的合法值

值 说明 最低版本
2d 2d 绘图上下文
webgl webgl 绘图上下文
webgl2 webgl2 绘图上下文 2.24.0

返回值

RenderingContext

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

ImageCanvas.createImage()

基础库 2.7.0 开始支持,低版本需做兼容处理。

微信小程序插件:支持

相关文档: 画布指南、canvas 组件介绍

功能描述

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

返回值

Image

Canvas

基础库 2.7.0 开始支持,低版本需做兼容处理。

相关文档: 画布指南、canvas 组件介绍

Canvas 实例,可通过 SelectorQuery 获取。

属性

number width

画布宽度

number height

画布高度

方法

RenderingContext Canvas.getContext(string contextType)

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

Image Canvas.createImage()

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

ImageData Canvas.createImageData()

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

Path2D Canvas.createPath2D(Path2D path)

创建 Path2D 对象

number Canvas.requestAnimationFrame(function callback)

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

Canvas.cancelAnimationFrame(number requestID)

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

string Canvas.toDataURL(string type, number encoderOptions)

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

示例代码

2D Canvas 示例 在开发者工具中预览效果

WebGL 示例 在开发者工具中预览效果