微信小程序开发文档 第49页

canvasContext.createPattern 基础库 1.9.90 开始支持，低版本需做兼容处理 定义 对指定的图像创建模式的方法，可在指定的方向上重复元图像 语法 canvasContext.createPattern(image, repetition) 参数 属性值 类型 说明 image String 重复的图像源，仅支持包内路径和临时路径 repetition String 指定如何重复图像，有效值有: repeat, repeat-x, repeat-y, no-repeat 例子 const ctx = wx.createCanvasContext('myCanvas') const pattern = ctx.createPattern('/path/to/image', 'repeat-x') ctx.fillStyle = pattern ctx.fillRect(0, 0, 300, 150) ctx.draw()

canvasContext.measureText 基础库 1.9.90 开始支持，低版本需做兼容处理 定义 测量文本尺寸信息，目前仅返回文本宽度。同步接口。 参数 参数 类型 说明 text String 要测量的文本 返回 返回 TextMetrics 对象，结构如下： 参数 类型 说明 width Number 文本的宽度 例子 const ctx = wx.createCanvasContext('myCanvas') ctx.font = 'italic bold 20px cursive' const metrics = ctx.measureText('Hello World') console.log(metrics.width)

绘图接口和方法 getActions (不推荐使用) 返回绘图上下文的绘图动作。 绘图接口和方法

绘图接口和方法 canvasContext.draw 定义 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。 Tip: 绘图上下文需要由wx.createCanvasContext(canvasId)来创建。 参数 参数 类型 说明 最低版本 reserve Boolean 非必填。本次绘制是否接着上一次绘制，即reserve参数为false，则在本次调用drawCanvas绘制之前native层应先清空画布再继续绘制；若reserver参数为true，则保留当前画布上的内容，本次调用drawCanvas绘制的内容覆盖在上面，默认 false callback Function 绘制完成后回调 1.7.0 例子 const ctx = wx.createCanvasContext('myCanvas') ctx.setFillStyle('red') ctx.fillRect(10, 10, 150, 100) ctx.draw() ctx.fillRect(50, 50, 150, 100) ctx.draw() 例子 const ctx = wx.createCanvasContext('myCanvas') ctx.setFillStyle('red') ctx.fillRect(10, 10, 150, 100) ctx.draw() ctx.fillRect(50, 50, 150, 100) ctx.draw(true) 绘图接口和方法

绘图接口和方法 canvasContext.save 定义 保存当前的绘图上下文。 restore 定义 恢复之前保存的绘图上下文。 例子 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() 绘图接口和方法

绘图接口和方法 canvasContext.setGlobalAlpha 定义 设置全局画笔透明度。 参数 参数 类型 范围 说明 alpha Number 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.drawImage 定义 绘制图像，图像保持原始尺寸。 参数 参数 类型 说明 imageResource String 所要绘制的图片资源 x Number 图像左上角的x坐标 y Number 图像左上角的y坐标 width Number 图像宽度 height Number 图像高度 例子 const ctx = wx.createCanvasContext('myCanvas') wx.chooseImage({ success: function(res){ ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100) ctx.draw() } }) 绘图接口和方法

绘图接口和方法 canvasContext.setTextBaseline 基础库 1.4.0 开始支持，低版本需做兼容处理 定义 用于设置文字的水平对齐 参数 参数 类型 定义 textBaseline String 可选值 ‘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 基础库版本 1.1.0 开始支持，低版本需做兼容处理 定义 用于设置文字的对齐 参数 参数 类型 定义 align String 可选值 ‘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() 绘图接口和方法

绘图接口和方法 canvasContext.fillText 定义 在画布上绘制被填充的文本。 参数 string text 在画布上输出的文本 number x 绘制文本的左上角 x 坐标位置 number y 绘制文本的左上角 y 坐标位置 number maxWidth 需要绘制的最大宽度，可选 例子 const ctx = wx.createCanvasContext('myCanvas') ctx.setFontSize(20) ctx.fillText('Hello', 20, 20) ctx.fillText('MINA', 100, 100) ctx.draw() 绘图接口和方法