基础库 2.11.0 开始支持，低版本需做兼容处理。
微信小程序插件：不支持
相关文档: 画布指南、canvas 组件介绍
功能描述
添加路径到当前路径。
参数
Path2D path
添加的 Path2D 路径。
分类： 画布
Path2D
基础库 2.11.0 开始支持，低版本需做兼容处理。
相关文档: 画布指南、canvas 组件介绍
Canvas 2D API 的接口 Path2D 用来声明路径，此路径稍后会被CanvasRenderingContext2D 对象使用。CanvasRenderingContext2D 接口的 路径方法 也存在于 Path2D 这个接口中，允许你在 canvas 中根据需要创建可以保留并重用的路径。
方法
Path2D.addPath(Path2D path)
添加路径到当前路径。
Path2D.arc(number x, number y, number radius, number startAngle, number endAngle, boolean counterclockwise)
添加一段圆弧路径。
Path2D.arcTo(number x1, number y1, number x2, number y2, number radius)
通过给定控制点添加一段圆弧路径。
Path2D.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)
添加三次贝塞尔曲线路径。
Path2D.closePath()
闭合路径到起点。
Path2D.ellipse(number x, number y, number radiusX, number radiusY, number rotation, number startAngle, number endAngle, boolean counterclockwise)
添加椭圆弧路径
Path2D.lineTo(number x, number y)
添加直线路径
Path2D.moveTo(number x, number y)
移动路径开始点
Path2D.quadraticCurveTo(number cpx, number cpy, number x, number y)
添加二次贝塞尔曲线路径。
Path2D.rect(number x, number y, number width, number height)
添加方形路径。
RenderingContextOffscreenCanvas.getContext(string contextType)
基础库 2.7.0 开始支持，低版本需做兼容处理。
微信小程序插件：支持，需要微信小程序基础库版本不低于 2.16.1
相关文档: 画布指南、canvas 组件介绍
功能描述
这个方法会返回 OffscreenCanvas 的绘图上下文
参数
string contextType
绘图上下文的类型，需要和调用 createOffscreenCanvas 时传入的 type 保持一致
contextType 可以填的值
| 值 | 说明 | 最低版本 |
|---|---|---|
| webgl | webgl 类型的上下文 | |
| 2d | 2d 类型的上下文 | 2.16.1 |
返回值
RenderingContext
注意：webgl 和 2d 这两种绘图上下文不能混着用，传入的 contextType 必须和 wx.createOffscreenCanvas 传入的 type 类型一致。
ImageOffscreenCanvas.createImage()
基础库 2.7.3 开始支持，低版本需做兼容处理。
微信小程序插件：支持，需要微信小程序基础库版本不低于 2.16.1
相关文档: 画布指南、canvas 组件介绍
功能描述
创建一个图片对象。支持在 2D Canvas 和 WebGL Canvas 下使用, 但不支持混用 2D 和 WebGL 的方法。
返回值
Image
注意不允许混用 webgl 和 2d 画布创建的图片对象，使用时请注意尽量使用 canvas 自身的 createImage 创建图片对象。
OffscreenCanvas
基础库 2.7.0 开始支持，低版本需做兼容处理。
相关文档: 画布指南、canvas 组件介绍
离屏 canvas 实例，可通过 wx.createOffscreenCanvas 创建。
属性
number width
画布宽度
number height
画布高度
方法
RenderingContext OffscreenCanvas.getContext(string contextType)
该方法返回 OffscreenCanvas 的绘图上下文
Image OffscreenCanvas.createImage()
创建一个图片对象。支持在 2D Canvas 和 WebGL Canvas 下使用, 但不支持混用 2D 和 WebGL 的方法。
ImageData
基础库 2.9.0 开始支持，低版本需做兼容处理。
相关文档: 画布指南、canvas 组件介绍
ImageData 对象
属性
number width
用像素表示 ImageData 的实际宽度
number height
用像素表示 ImageData 的实际高度
Uint8ClampedArray data
一个一维数组，按 RGBA 顺序存放数据，每个数值是 0 到 255（含 0 和 255）之间的整数
图片
基础库 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 来渲染