分类： CanvasContext

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

需要绘制的最大宽度，可选

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

垂直移动

CanvasContext.setTextBaseline设置文字基线

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

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

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

微信小程序插件：支持

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

功能描述

设置文字的竖直对齐

参数

string textBaseline

文字的竖直对齐方式

textBaseline 的合法值

值 说明 最低版本
top 顶部对齐
bottom 底部对齐
middle 居中对齐
normal

示例代码

const ctx = wx.createCanvasContext('myCanvas')

ctx.setStrokeStyle('red')
ctx.moveTo(5, 75)
ctx.lineTo(295, 75)
ctx.stroke()

ctx.setFontSize(20)

ctx.setTextBaseline('top')
ctx.fillText('top', 5, 75)

ctx.setTextBaseline('middle')
ctx.fillText('middle', 50, 75)

ctx.setTextBaseline('bottom')
ctx.fillText('bottom', 120, 75)

ctx.setTextBaseline('normal')
ctx.fillText('normal', 200, 75)

ctx.draw()

CanvasContext.setTextAlign(string align)

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

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

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

微信小程序插件：支持

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

功能描述

设置文字的对齐方式

参数

string align

文字的对齐方式

align 的合法值

值 说明 最低版本
left 左对齐
center 居中对齐
right 右对齐

示例代码

const ctx = wx.createCanvasContext('myCanvas')

ctx.setStrokeStyle('red')
ctx.moveTo(150, 20)
ctx.lineTo(150, 170)
ctx.stroke()

ctx.setFontSize(15)
ctx.setTextAlign('left')
ctx.fillText('textAlign=left', 150, 60)

ctx.setTextAlign('center')
ctx.fillText('textAlign=center', 150, 80)

ctx.setTextAlign('right')
ctx.fillText('textAlign=right', 150, 100)

ctx.draw()

<img alt="" src="https://developers.weixin.qq.com/data:image/png;base64,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%0A

CanvasContext.setStrokeStyle

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

从基础库 1.9.90 开始，本接口停止维护，请使用 CanvasContext.strokeStyle 代替

微信小程序插件：支持

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

功能描述

设置描边颜色。

参数

string|CanvasGradient color

描边的颜色，默认颜色为 black。

代码示例

const ctx = wx.createCanvasContext('myCanvas')
ctx.setStrokeStyle('red')
ctx.strokeRect(10, 10, 150, 75)
ctx.draw()

CanvasContext.setShadow

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

从基础库 1.9.90 开始，本接口停止维护，请使用 CanvasContext.shadowOffsetX|CanvasContext.shadowOffsetY|CanvasContext.shadowColor|CanvasContext.shadowBlur 代替

微信小程序插件：支持

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

功能描述

设置阴影样式。

参数

number offsetX

阴影相对于形状在水平方向的偏移，默认值为 0。

number offsetY

阴影相对于形状在竖直方向的偏移，默认值为 0。

number blur

阴影的模糊级别，数值越大越模糊。范围 0- 100。，默认值为 0。

string color

阴影的颜色。默认值为 black。

示例代码

const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('red')
ctx.setShadow(10, 50, 50, 'blue')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()