基础库 2.9.0 开始支持，低版本需做兼容处理。
相关文档: 画布指南、canvas 组件介绍
ImageData 对象
属性
number width
用像素表示 ImageData 的实际宽度
number height
用像素表示 ImageData 的实际高度
Uint8ClampedArray data
一个一维数组，按 RGBA 顺序存放数据，每个数值是 0 到 255（含 0 和 255）之间的整数
作者： Next
图片
基础库 2.7.0 开始支持，低版本需做兼容处理。
相关文档: 画布指南、canvas 组件介绍
图片对象
属性
string src
图片的 URL。v2.11.0 起支持传递 base64 Data URI
number width
图片的真实宽度
number height
图片的真实高度
string referrerPolicy
基础库 2.13.0 开始支持，低版本需做兼容处理。
origin: 发送完整的referrer; no-referrer: 不发送。格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为微信小程序的 appid，{version} 为微信小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本；
function onload
图片加载完成后触发的回调函数
function onerror
图片加载发生错误后触发的回调函数
Color
颜色。可以用以下几种方式来表示 canvas 中使用的颜色：
- RGB 颜色： 如
'rgb(255, 0, 0)' - RGBA 颜色：如
'rgba(255, 0, 0, 0.3)' - 16 进制颜色： 如
'#FF0000' - 预定义的颜色： 如
'red'
其中预定义颜色有以下148个：注意*: Color Name 大小写不敏感
| Color Name | HEX |
|---|---|
| AliceBlue | #F0F8FF |
| AntiqueWhite | #FAEBD7 |
| Aqua | #00FFFF |
| Aquamarine | #7FFFD4 |
| Azure | #F0FFFF |
| Beige | #F5F5DC |
| Bisque | #FFE4C4 |
| Black | #000000 |
| BlanchedAlmond | #FFEBCD |
| Blue | #0000FF |
| BlueViolet | #8A2BE2 |
| Brown | #A52A2A |
| BurlyWood | #DEB887 |
| CadetBlue | #5F9EA0 |
| Chartreuse | #7FFF00 |
| Chocolate | #D2691E |
| Coral | #FF7F50 |
| CornflowerBlue | #6495ED |
| Cornsilk | #FFF8DC |
| Crimson | #DC143C |
| Cyan | #00FFFF |
| DarkBlue | #00008B |
| DarkCyan | #008B8B |
| DarkGoldenRod | #B8860B |
| DarkGray | #A9A9A9 |
| DarkGrey | #A9A9A9 |
| DarkGreen | #006400 |
| DarkKhaki | #BDB76B |
| DarkMagenta | #8B008B |
| DarkOliveGreen | #556B2F |
| DarkOrange | #FF8C00 |
| DarkOrchid | #9932CC |
| DarkRed | #8B0000 |
| DarkSalmon | #E9967A |
| DarkSeaGreen | #8FBC8F |
| DarkSlateBlue | #483D8B |
| DarkSlateGray | #2F4F4F |
| DarkSlateGrey | #2F4F4F |
| DarkTurquoise | #00CED1 |
| DarkViolet | #9400D3 |
| DeepPink | #FF1493 |
| DeepSkyBlue | #00BFFF |
| DimGray | #696969 |
| DimGrey | #696969 |
| DodgerBlue | #1E90FF |
| FireBrick | #B22222 |
| FloralWhite | #FFFAF0 |
| ForestGreen | #228B22 |
| Fuchsia | #FF00FF |
| Gainsboro | #DCDCDC |
| GhostWhite | #F8F8FF |
| Gold | #FFD700 |
| GoldenRod | #DAA520 |
| Gray | #808080 |
| Grey | #808080 |
| Green | #008000 |
| GreenYellow | #ADFF2F |
| HoneyDew | #F0FFF0 |
| HotPink | #FF69B4 |
| IndianRed | #CD5C5C |
| Indigo | #4B0082 |
| Ivory | #FFFFF0 |
| Khaki | #F0E68C |
| Lavender | #E6E6FA |
| LavenderBlush | #FFF0F5 |
| LawnGreen | #7CFC00 |
| LemonChiffon | #FFFACD |
| LightBlue | #ADD8E6 |
| LightCoral | #F08080 |
| LightCyan | #E0FFFF |
| LightGoldenRodYellow | #FAFAD2 |
| LightGray | #D3D3D3 |
| LightGrey | #D3D3D3 |
| LightGreen | #90EE90 |
| LightPink | #FFB6C1 |
| LightSalmon | #FFA07A |
| LightSeaGreen | #20B2AA |
| LightSkyBlue | #87CEFA |
| LightSlateGray | #778899 |
| LightSlateGrey | #778899 |
| LightSteelBlue | #B0C4DE |
| LightYellow | #FFFFE0 |
| Lime | #00FF00 |
| LimeGreen | #32CD32 |
| Linen | #FAF0E6 |
| Magenta | #FF00FF |
| Maroon | #800000 |
| MediumAquaMarine | #66CDAA |
| MediumBlue | #0000CD |
| MediumOrchid | #BA55D3 |
| MediumPurple | #9370DB |
| MediumSeaGreen | #3CB371 |
| MediumSlateBlue | #7B68EE |
| MediumSpringGreen | #00FA9A |
| MediumTurquoise | #48D1CC |
| MediumVioletRed | #C71585 |
| MidnightBlue | #191970 |
| MintCream | #F5FFFA |
| MistyRose | #FFE4E1 |
| Moccasin | #FFE4B5 |
| NavajoWhite | #FFDEAD |
| Navy | #000080 |
| OldLace | #FDF5E6 |
| Olive | #808000 |
| OliveDrab | #6B8E23 |
| Orange | #FFA500 |
| OrangeRed | #FF4500 |
| Orchid | #DA70D6 |
| PaleGoldenRod | #EEE8AA |
| PaleGreen | #98FB98 |
| PaleTurquoise | #AFEEEE |
| PaleVioletRed | #DB7093 |
| PapayaWhip | #FFEFD5 |
| PeachPuff | #FFDAB9 |
| Peru | #CD853F |
| Pink | #FFC0CB |
| Plum | #DDA0DD |
| PowderBlue | #B0E0E6 |
| Purple | #800080 |
| RebeccaPurple | #663399 |
| Red | #FF0000 |
| RosyBrown | #BC8F8F |
| RoyalBlue | #4169E1 |
| SaddleBrown | #8B4513 |
CanvasGradient.addColorStop(number stop, string color)
CanvasContext 是旧版的接口，新版 Canvas 2D 接口与 Web 一致
从基础库 2.9.0 开始，本接口停止维护，请使用 RenderingContext 代替
微信小程序插件：不支持
相关文档: 旧版画布迁移指南、canvas 组件介绍
功能描述
添加颜色的渐变点。小于最小 stop 的部分会按最小 stop 的 color 来渲染，大于最大 stop 的部分会按最大 stop 的 color 来渲染
参数
number stop
表示渐变中开始与结束之间的位置，范围 0-1。
string 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()
CanvasGradient
相关文档: 旧版画布迁移指南、canvas 组件介绍
渐变对象
方法
CanvasGradient.addColorStop(number stop, string color)
添加颜色的渐变点。小于最小 stop 的部分会按最小 stop 的 color 来渲染，大于最大 stop 的部分会按最大 stop 的 color 来渲染
CanvasContext.translate(number x, number y)
CanvasContext 是旧版的接口，新版 Canvas 2D 接口与 Web 一致
从基础库 2.9.0 开始，本接口停止维护，请使用 RenderingContext 代替
微信小程序插件：支持
相关文档: 旧版画布迁移指南、canvas 组件介绍
功能描述
对当前坐标系的原点 (0, 0) 进行变换。默认的坐标系原点为页面左上角。
参数
number x
水平坐标平移量
number y
竖直坐标平移量
示例代码
const ctx = wx.createCanvasContext('myCanvas')
ctx.strokeRect(10, 10, 150, 100)
ctx.translate(20, 20)
ctx.strokeRect(10, 10, 150, 100)
ctx.translate(20, 20)
ctx.strokeRect(10, 10, 150, 100)
ctx.draw()
CanvasContext.transform 方法
CanvasContext 是旧版的接口，新版 Canvas 2D 接口与 Web 一致
从基础库 2.9.0 开始，本接口停止维护，请使用 RenderingContext 代替
基础库 1.9.90 开始支持，低版本需做兼容处理。
微信小程序插件：支持
相关文档: 旧版画布迁移指南、canvas 组件介绍
功能描述
使用矩阵多次叠加当前变换的方法
参数
number scaleX
水平缩放
number skewX
水平倾斜
number skewY
垂直倾斜
number scaleY
垂直缩放
number translateX
水平移动
number translateY
垂直移动
CanvasContext.strokeText
CanvasContext 是旧版的接口，新版 Canvas 2D 接口与 Web 一致
从基础库 2.9.0 开始，本接口停止维护，请使用 RenderingContext 代替
基础库 1.9.90 开始支持，低版本需做兼容处理。
微信小程序插件：支持
相关文档: 旧版画布迁移指南、canvas 组件介绍
功能描述
在指定的 (x, y) 位置绘制文本描边的方法
参数
string text
要绘制的文本
number x
文本起始点的 x 轴坐标
number y
文本起始点的 y 轴坐标
number maxWidth
需要绘制的最大宽度，可选
wx.copyRealname(Object object)
基础库 3.17.3 开始支持，低版本需做兼容处理。
以 Promise 风格 调用：不支持
需要页面权限：当前是插件页面时，宿主微信小程序不能调用该接口，反之亦然
微信小程序插件：不支持
功能描述
实名信息查询与复制。
参数
Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| extraData | Object | 是 | 透传给目标微信小程序的商户数据（必填） | |
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） | |
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
object.success 回调函数
参数
Object res
| 属性 | 类型 | 说明 |
|---|---|---|
| extraData | Object | 商户回传数据 |
object.fail 回调函数
参数
Object err
| 属性 | 类型 | 说明 |
|---|---|---|
| errMsg | string | 错误信息 |
示例代码
wx.copyRealname({
extraData: { mch_id: '1230000109' },
success (res) {
console.log(res.extraData)
},
fail (err) {
console.error(err)
},
})
CanvasContext.strokeRect绘制矩形路径
CanvasContext 是旧版的接口，新版 Canvas 2D 接口与 Web 一致
从基础库 2.9.0 开始，本接口停止维护，请使用 RenderingContext 代替
微信小程序插件：支持
相关文档: 旧版画布迁移指南、canvas 组件介绍
功能描述
画一个矩形(非填充)。 用 setStrokeStyle 设置矩形线条的颜色，如果没设置默认是黑色。
参数
number x
矩形路径左上角的横坐标
number y
矩形路径左上角的纵坐标
number width
矩形路径的宽度
number height
矩形路径的高度
示例代码
const ctx = wx.createCanvasContext('myCanvas')
ctx.setStrokeStyle('red')
ctx.strokeRect(10, 10, 150, 75)
ctx.draw()