动态与公告

【2025年1月2日】关于腾讯云小程序平台更名为腾讯云超级应用服务的公告

控制台更新动态

Android SDK 更新动态

iOS SDK 更新动态

Flutter 更新动态

IDE 更新动态

基础库更新动态

产品简介

产品概述

产品优势

应用场景

购买指南

计费概述

按量计费（后付费）

续费指引

停服说明

快速入门

套餐管理

概述

控制台账号管理

存储配置

加速配置

品牌化配置

平台功能

控制台登录

用户和权限体系

小程序管理

小游戏管理

应用管理

商业化

平台管理

用户管理

团队管理

运营管理

安全中心

代码接入指引

Demo 及 SDK 获取

Android

iOS

Flutter

App 服务端接入指南

GUID 生成规则

小程序开发指南

小程序介绍与开发环境

小程序代码组成

指南

框架

组件

API

服务端

JS SDK

基础库

IDE 使用指南

小游戏开发指南

指南

API

服务端

实践教程

小程序登录实践教程

小程序订阅消息实践教程

支付相关实践教程

广告接入实践教程

小游戏订阅消息实践教程

画布概要

PDF

聚焦模式

字号

最后更新时间： 2025-05-16 17:43:22

createOffscreenCanvas
该 API 使用方法为 OffscreenCanvas wx.createOffscreenCanvas(object object, number width, number height, Object this)
功能说明：创建离屏 canvas 实例。
参数及说明：
number width：画布宽度。
number height：画布高度。
object this: 在自定义组件下，当前组件实例的 this。
object object
属性
类型
默认值
必填
说明
type
string
2d
否
创建的离屏 canvas 类型，目前仅支持2d
width
number
-
否
画布宽度
height
number
-
否
画布高度
compInst
Component
-
否
在自定义组件下，当前组件实例的 this
createCanvasContext
该 API 使用方法为 CanvasContext wx.createCanvasContext(string canvasId, Object this)
功能说明：创建 canvas 的绘图上下文 canvasContext 对象。
参数及说明：
string canvasId：要获取上下文的<canvas>组件 canvas-id 属性。
Object this：在自定义组件下，当前组件实例的 this，表示在这自定义组件下查找拥有 canvas-id 的 <canvas>，如果省略，则不在任何自定义组件内查找。
返回值：canvasContext。
canvasToTempFilePath
该 API 使用方法为 wx.canvasToTempFilePath(Object object, Object this)
功能说明：把当前画布指定区域的内容导出，生成指定大小的图片，在 draw() 回调里调用该方法才能保证图片导出成功。
参数及说明：Object object。
属性
类型
默认值
必填
说明
x
number
0
否
指定的画布区域的左上角横坐标
y
number
0
否
指定的画布区域的左上角纵坐标
width
number
canvas宽度-x
否
指定的画布区域的宽度
height
number
canvas高度-y
否
指定的画布区域的高度
destWidth
number
width*屏幕像素密度
否
输出的图片的宽度
destHeight
number
height*屏幕像素密度
否
输出的图片的高度
canvasId
string
-
是
画布标识，传入 <canvas> 组件的 canvas-id
fileType
string
png
否
目标文件的类型
quality
number
-
是
图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作1.0 处理。
success
function
-
否
接口调用成功的回调函数
fail
function
-
否
接口调用失败的回调函数
complete
function
-
否
接口调用结束的回调函数（调用成功、失败都会执行）
object.fileType 的合法值
值
说明
jpg
jpg 图片
png
png 图片
object.success 的 res 回调结果
属性
类型
说明
tempFilePath
string
生成文件的临时路径 (本地路径)
示例代码：
wx.canvasToTempFilePath({
  x: 100,
  y: 200,
  width: 50,
  height: 50,
  destWidth: 100,
  destHeight: 100,
  canvasId: 'myCanvas',
  success(res) {
    console.log(res.tempFilePath)
  }
})
canvasPutImageData
该 API 使用方法为 wx.canvasPutImageData(Object object, Object this)
功能说明：将像素数据绘制到画布，在自定义组件下，第二个参数传入自定义组件实例 this，以操作组件内canvas组件。
参数1：Object object。
属性
类型
默认值
必填
说明
canvasId
string
-
是
画布标识，传入 <canvas> 组件的 canvas-id 属性
data
Uint8ClampedArray
-
是
图像像素点数据，一维数组，每四项表示一个像素点的 rgba
x
number
-
是
源图像数据在目标画布中的位置偏移量（x 轴方向的偏移量）
y
number
-
是
源图像数据在目标画布中的位置偏移量（y 轴方向的偏移量）
width
number
-
是
源图像数据矩形区域的宽度
height
number
-
是
源图像数据矩形区域的高度
success
function
-
否
接口调用成功的回调函数
fail
function
-
否
接口调用失败的回调函数
complete
function
-
否
接口调用结束的回调函数（调用成功、失败都会执行）
参数2：Object this，在自定义组件下，当前组件实例的 this，以操作组件内<canvas>组件。
示例代码：
const data = new Uint8ClampedArray([255, 0, 0, 1])
wx.canvasPutImageData({
  canvasId: 'myCanvas',
  x: 0,
  y: 0,
  width: 1,
  data,
  success(res) {}
})
canvasGetImageData
该 API 使用方法为 wx.canvasGetImageData(Object object, Object this)
功能说明：获取 canvas 区域隐含的像素数据。
参数1：Object object。
属性
类型
默认值
必填
说明
canvasId
string
-
是
画布标识，传入<canvas>组件的canvas-id属性
x
number
-
是
将要被提取的图像数据矩形区域的左上角横坐标
y
number
-
是
将要被提取的图像数据矩形区域的左上角纵坐标
width
number
-
是
将要被提取的图像数据矩形区域的宽度
height
number
-
是
将要被提取的图像数据矩形区域的高度
success
function
-
否
接口调用成功的回调函数
fail
function
-
否
接口调用失败的回调函数
complete
function
-
否
接口调用结束的回调函数（调用成功、失败都会执行）
object.success 回调函数参数：Object res。
属性
类型
说明
width
number
图像数据矩形的宽度
height
number
图像数据矩形的高度
data
Uint8ClampedArray
图像像素点数据，一维数组，每四项表示一个像素点的 rgba
参数2：Object this，在自定义组件下，当前组件实例的 this，以操作组件内<canvas>组件。
示例代码：
wx.canvasGetImageData({
  canvasId: 'myCanvas',
  x: 0,
  y: 0,
  width: 100,
  height: 100,
  success(res) {
    console.log(res.width) // 100
    console.log(res.height) // 100
    console.log(res.data instanceof Uint8ClampedArray) // true
    console.log(res.data.length) // 100 * 100 * 4
  }
})
Image
功能说明：图片对象。
参数及说明
属性
类型
说明
src
string
图片的 URL
width
number
图片的真实宽度
height
number
图片的真实高度
referrerPolicy
string
origin：发送完整的referrer；no-referrer：不发送。格式固定为
https://servicewechat.com/{appid}/{version}/page-frame.html
，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本；
onload
function
图片加载完成后触发的回调函数
onerror
function
图片加载发生错误后触发的回调函数
ImageData
功能说明：ImageData 对象。
参数及说明
属性
类型
说明
width
number
使用像素描述 ImageData 的实际宽度
height
number
使用像素描述 ImageData 的实际高度
data
Uint8ClampedArray
一维数组，包含以 RGBA 顺序的数据，数据使用 0 至 255（包含）的整数表示
canvasGradient
功能说明：渐变对象。
.addColorStop
该 方法 使用方式为 CanvasGradient.addColorStop(number stop, Color color)
功能说明：添加颜色的渐变点。小于最小 stop 的部分会按最小 stop 的 color 来渲染，大于最大 stop 的部分会按最大 stop 的 color 来渲染，相当于CanvasGradient.addColorStop(number stop, Color color)。
参数1：number stop，表示渐变中开始与结束之间的位置，范围0-1。
参数2：Color color，渐变点的颜色。
示例代码：
const ctx = wx.createCanvasContext('myCanvas')
﻿
// Create circular gradient
const grd = ctx.createLinearGradient(30, 10, 120, 10)
grd.addColorStop(0, 'red')
grd.addColorStop(0.16, 'orange')
grd.addColorStop(0.33, 'yellow')
grd.addColorStop(0.5, 'green')
grd.addColorStop(0.66, 'cyan')
grd.addColorStop(0.83, 'blue')
grd.addColorStop(1, 'purple')
﻿
// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()
RenderingContext
功能说明：Canvas 绘图上下文。
通过 Canvas.getContext('2d') 接口可以获取 CanvasRenderingContext2D 对象，实现了 HTML Canvas 2D Context 定义的属性、方法。
通过 Canvas.getContext('webgl') 或 OffscreenCanvas.getContext('webgl') 接口可以获取 WebGLRenderingContext 对象，实现了 WebGL 1.0 定义的所有属性、方法、常量。
详情请见 canvasContext。
OffscreenCanvas
详情请见 OffscreenCanvas。
Path2D
详情请见 Path2D。
Canvas
详情请见 Canvas。
Color
详情请见 Color。

帮助和支持

本页内容是否解决了您的问题？

您也可以联系销售或提交工单以寻求帮助。

填写满意度调查问卷，共创更好文档体验。

文档反馈

属性	类型	默认值	必填	说明
type	string	2d	否	创建的离屏 canvas 类型，目前仅支持2d
width	number	-	否	画布宽度
height	number	-	否	画布高度
compInst	Component	-	否	在自定义组件下，当前组件实例的 this

tencent cloud

腾讯云超级应用服务

画布概要

createOffscreenCanvas

createCanvasContext

canvasToTempFilePath

canvasPutImageData

canvasGetImageData

Image

ImageData

canvasGradient

.addColorStop

RenderingContext

OffscreenCanvas

Path2D

Canvas

Color

帮助和支持