画布 – 第 4 页 – 微信小程序开发指南

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

CanvasContext.setFontSize(number fontSize)

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

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

微信小程序插件：支持

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

功能描述

设置字体的字号

参数

number fontSize

字体的字号

示例代码

const ctx = wx.createCanvasContext('myCanvas')

ctx.setFontSize(20)
ctx.fillText('20', 20, 20)
ctx.setFontSize(30)
ctx.fillText('30', 40, 40)
ctx.setFontSize(40)
ctx.fillText('40', 60, 60)
ctx.setFontSize(50)
ctx.fillText('50', 90, 90)

ctx.draw()

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

CanvasContext.setFillStyle

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

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

微信小程序插件：支持

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

功能描述

设置填充色。

参数

string|CanvasGradient color

填充的颜色，默认颜色为 black。

代码示例

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

CanvasContext.scale方法

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

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

微信小程序插件：支持

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

功能描述

在调用后，之后创建的路径其横纵坐标会被缩放。多次调用倍数会相乘。

参数

number scaleWidth

横坐标缩放的倍数 (1 = 100%，0.5 = 50%，2 = 200%)

number scaleHeight

纵坐标轴缩放的倍数 (1 = 100%，0.5 = 50%，2 = 200%)

示例代码

const ctx = wx.createCanvasContext('myCanvas')

ctx.strokeRect(10, 10, 25, 15)
ctx.scale(2, 2)
ctx.strokeRect(10, 10, 25, 15)
ctx.scale(2, 2)
ctx.strokeRect(10, 10, 25, 15)

ctx.draw()

CanvasContext.save()

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

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

微信小程序插件：支持

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

功能描述

保存绘图上下文。

示例代码

const ctx = wx.createCanvasContext('myCanvas')

// save the default fill style
ctx.save()
ctx.setFillStyle('red')
ctx.fillRect(10, 10, 150, 100)

// restore to the previous saved state
ctx.restore()
ctx.fillRect(50, 50, 150, 100)

ctx.draw()