API – 第 26 页 – 微信小程序开发指南

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

CanvasContext.setMiterLimit

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

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

微信小程序插件：支持

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

功能描述

设置最大斜接长度。斜接长度指的是在两条线交汇处内角和外角之间的距离。当 CanvasContext.setLineJoin() 为 miter 时才有效。超过最大倾斜长度的，连接处将以 lineJoin 为 bevel 来显示。

参数

number miterLimit

最大斜接长度

示例代码

const ctx = wx.createCanvasContext('myCanvas')
ctx.beginPath()
ctx.setLineWidth(10)
ctx.setLineJoin('miter')
ctx.setMiterLimit(1)
ctx.moveTo(10, 10)
ctx.lineTo(100, 50)
ctx.lineTo(10, 90)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(10)
ctx.setLineJoin('miter')
ctx.setMiterLimit(2)
ctx.moveTo(50, 10)
ctx.lineTo(140, 50)
ctx.lineTo(50, 90)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(10)
ctx.setLineJoin('miter')
ctx.setMiterLimit(3)
ctx.moveTo(90, 10)
ctx.lineTo(180, 50)
ctx.lineTo(90, 90)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(10)
ctx.setLineJoin('miter')
ctx.setMiterLimit(4)
ctx.moveTo(130, 10)
ctx.lineTo(220, 50)
ctx.lineTo(130, 90)
ctx.stroke()

ctx.draw()

CanvasContext.setLineWidth(number lineWidth)

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

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

微信小程序插件：支持

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

功能描述

设置线条的宽度

参数

number lineWidth

线条的宽度，单位px

示例代码

const ctx = wx.createCanvasContext('myCanvas')
ctx.beginPath()
ctx.moveTo(10, 10)
ctx.lineTo(150, 10)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(5)
ctx.moveTo(10, 30)
ctx.lineTo(150, 30)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(10)
ctx.moveTo(10, 50)
ctx.lineTo(150, 50)
ctx.stroke()

ctx.beginPath()
ctx.setLineWidth(15)
ctx.moveTo(10, 70)
ctx.lineTo(150, 70)
ctx.stroke()

ctx.draw()

CanvasContext.setLineJoin设置线条交点样式

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

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

微信小程序插件：支持

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

功能描述

设置线条的交点样式

参数

string lineJoin

线条的结束交点样式

lineJoin 的合法值

值	说明	最低版本
bevel	斜角
round	圆角
miter	尖角

示例代码

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

ctx.beginPath()
ctx.setLineJoin('bevel')
ctx.setLineWidth(10)
ctx.moveTo(50, 10)
ctx.lineTo(140, 50)
ctx.lineTo(50, 90)
ctx.stroke()

ctx.beginPath()
ctx.setLineJoin('round')
ctx.setLineWidth(10)
ctx.moveTo(90, 10)
ctx.lineTo(180, 50)
ctx.lineTo(90, 90)
ctx.stroke()

ctx.beginPath()
ctx.setLineJoin('miter')
ctx.setLineWidth(10)
ctx.moveTo(130, 10)
ctx.lineTo(220, 50)
ctx.lineTo(130, 90)
ctx.stroke()

ctx.draw()

CanvasContext.setLineDash

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

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

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

微信小程序插件：支持

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

功能描述

设置虚线样式。

参数

Array. pattern

一组描述交替绘制线段和间距（坐标空间单位）长度的数字

number offset

虚线偏移量

示例代码

const ctx = wx.createCanvasContext('myCanvas')

ctx.setLineDash([10, 20], 5);

ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();

ctx.draw()

CanvasContext.setLineCap设置线条端点样式

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

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

微信小程序插件：支持

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

功能描述

设置线条的端点样式

参数

string lineCap

线条的结束端点样式

lineCap 的合法值

值	说明	最低版本
butt	向线条的每个末端添加平直的边缘。
round	向线条的每个末端添加圆形线帽。
square	向线条的每个末端添加正方形线帽。

示例代码

const ctx = wx.createCanvasContext('myCanvas')
ctx.beginPath()
ctx.moveTo(10, 10)
ctx.lineTo(150, 10)
ctx.stroke()

ctx.beginPath()
ctx.setLineCap('butt')
ctx.setLineWidth(10)
ctx.moveTo(10, 30)
ctx.lineTo(150, 30)
ctx.stroke()

ctx.beginPath()
ctx.setLineCap('round')
ctx.setLineWidth(10)
ctx.moveTo(10, 50)
ctx.lineTo(150, 50)
ctx.stroke()

ctx.beginPath()
ctx.setLineCap('square')
ctx.setLineWidth(10)
ctx.moveTo(10, 70)
ctx.lineTo(150, 70)
ctx.stroke()

ctx.draw()

CanvasContext.setGlobalAlpha(number alpha)

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

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

微信小程序插件：支持

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

功能描述

设置全局画笔透明度。

参数

number alpha

透明度。范围 0-1，0 表示完全透明，1 表示完全不透明。

示例代码

const ctx = wx.createCanvasContext('myCanvas')

ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)
ctx.setGlobalAlpha(0.2)
ctx.setFillStyle('blue')
ctx.fillRect(50, 50, 150, 100)
ctx.setFillStyle('yellow')
ctx.fillRect(100, 100, 150, 100)

ctx.draw()