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
鲑鱼色 #FA8072

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()

CanvasContext.stroke()

CanvasContext 是旧版的接口,新版 Canvas 2D 接口与 Web 一致

从基础库 2.9.0 开始,本接口停止维护,请使用 RenderingContext 代替

微信小程序插件:支持

相关文档: 旧版画布迁移指南、canvas 组件介绍

功能描述

画出当前路径的边框。默认颜色为黑色。

示例代码

const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.stroke()
ctx.draw()

stroke() 描绘的路径是从 beginPath() 开始计算,但是不会将 strokeRect() 包含进去。

const ctx = wx.createCanvasContext('myCanvas')
// begin path
ctx.rect(10, 10, 100, 30)
ctx.setStrokeStyle('yellow')
ctx.stroke()

// begin another path
ctx.beginPath()
ctx.rect(10, 40, 100, 30)

// only stoke this rect, not in current path
ctx.setStrokeStyle('blue')
ctx.strokeRect(10, 70, 100, 30)

ctx.rect(10, 100, 100, 30)

// it will stroke current path
ctx.setStrokeStyle('red')
ctx.stroke()
ctx.draw()

CanvasContext.setTransform设置变换

CanvasContext 是旧版的接口,新版 Canvas 2D 接口与 Web 一致

从基础库 2.9.0 开始,本接口停止维护,请使用 RenderingContext 代替

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

微信小程序插件:支持

相关文档: 旧版画布迁移指南、canvas 组件介绍

功能描述

使用矩阵重新设置(覆盖)当前变换的方法

参数

number scaleX

水平缩放

number skewX

水平倾斜

number skewY

垂直倾斜

number scaleY

垂直缩放

number translateX

水平移动

number translateY

垂直移动