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

绘图接口和方法 canvasContext.addColorStop 定义 创建一个颜色的渐变点。 Tip: 小于最小 stop 的部分会按最小 stop 的 color 来渲染，大于最大 stop 的部分会按最大 stop 的 color 来渲染。 Tip: 需要使用addColorStop()来指定渐变点，至少要两个。 参数 参数 类型 定义 stop Number(0-1) 表示渐变点在起点和终点中的位置 color Color 渐变点的颜色 例子 const ctx = wx.crateCanvasContext('myCanvas') // Create circular gradient const grd = ctx.createCircularGradient(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() 绘图接口和方法

绘图接口和方法 canvasContext.createCircularGradient 定义 创建一个圆形的渐变颜色。 Tip: 起点在圆心，终点在圆环。 Tip: 需要使用addColorStop()来指定渐变点，至少要两个。 参数 参数 类型 定义 x Number 圆心的x坐标 y Number 圆心的y坐标 r Number 圆的半径 例子 const ctx = wx.createCanvasContext('myCanvas') // Create circular gradient const grd = ctx.createCircularGradient(75, 50, 50) grd.addColorStop(0, 'red') grd.addColorStop(1, 'white') // Fill with gradient ctx.setFillStyle(grd) ctx.fillRect(10, 10, 150, 80) ctx.draw() 绘图接口和方法

绘图接口和方法 canvasContext.createLinearGradient 定义 创建一个线性的渐变颜色。 Tip: 需要使用addColorStop()来指定渐变点，至少要两个。 参数 参数 类型 定义 x0 Number 起点的x坐标 y0 Number 起点的y坐标 x1 Number 终点的x坐标 y1 Number 终点的y坐标 例子 const ctx = wx.createCanvasContext('myCanvas') // Create linear gradient const grd = ctx.createLinearGradient(0, 0, 200, 0) grd.addColorStop(0, 'red') grd.addColorStop(1, 'white') // Fill with gradient ctx.setFillStyle(grd) ctx.fillRect(10, 10, 150, 80) ctx.draw() 绘图接口和方法

绘图接口和方法 canvasContext.setShadow 定义 设置阴影样式。 Tip: 如果没有设置，offsetX 默认值为0， offsetY 默认值为0， blur 默认值为0，color 默认值为black。 参数 参数 类型 范围 定义 offsetX Number   阴影相对于形状在水平方向的偏移 offsetY Number   阴影相对于形状在竖直方向的偏移 blur Number 0~100 阴影的模糊级别，数值越大越模糊 color Color   阴影的颜色 例子 const ctx = wx.createCanvasContext('myCanvas') ctx.setFillStyle('red') ctx.setShadow(10, 50, 50, 'blue') ctx.fillRect(10, 10, 150, 75) ctx.draw() 绘图接口和方法

绘图接口和方法 canvasContext.setStrokeStyle 定义 设置边框颜色。 Tip: 如果没有设置fillStyle，默认颜色为black。 参数 参数 类型 定义   color Color Gradient Object 填充色 例子 const ctx = wx.createCanvasContext('myCanvas') ctx.setStrokeStyle('red') ctx.strokeRect(10, 10, 150, 75) ctx.draw() 绘图接口和方法

绘图接口和方法 canvasContext.setFillStyle 定义 设置填充色。 Tip: 如果没有设置fillStyle，默认颜色为black。 参数 参数 类型 定义   color Color  Gradient Object 填充色 例子 const ctx = wx.createCanvasContext('myCanvas') ctx.setFillStyle('red') ctx.fillRect(10, 10, 150, 75) ctx.draw() 绘图接口和方法

绘图接口和方法 wx.canvasToTempFilePath(OBJECT) 把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。 OBJECT参数说明： 参数 类型 必填 说明 最低版本 x Number 否 画布x轴起点（默认0） 1.2.0 y Number 否 画布y轴起点（默认0） 1.2.0 width Number 否 画布宽度（默认为canvas宽度-x） 1.2.0 height Number 否 画布高度（默认为canvas高度-y） 1.2.0 destWidth Number 否 输出图片宽度（默认为width） 1.2.0 destHeight Number 否 输出图片高度（默认为height） 1.2.0 canvasId String 是 画布标识，传入 <canvas/> 的 cavas-id fileType String 否 目标文件的类型，只支持 ‘jpg’ 或 ‘png’。默认为 ‘png’ 1.7.0 quality Number 否 图片的质量，取值范围为 (0, 1]，不在范围内时当作1.0处理 1.7.0 success Function 否 接口调用成功的回调函数 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行） 示例代码 wx.canvasToTempFilePath({ x: 100, y: 200, width: 50, height: 50, destWidth: 100, destHeight: 100, canvasId: 'myCanvas', success: function(res) { console.log(res.tempFilePath) } }) 绘图接口和方法

绘图接口和方法 drawCanvas (不推荐使用) 定义 用所提供的 actions 在所给的 canvas-id 对应的 canvas 上进行绘图。 参数 参数 类型 说明 canvasId String 画布标识，传入<canvas/>的 cavas-id actions Array 绘图动作数组，由 wx.createContext 创建的 context，调用 getActions 方法导出绘图动作数组。 reserve Boolean (可选)本次绘制是否接着上一次绘制，即reserve参数为false，则在本次调用drawCanvas绘制之前native层应先清空画布再继续绘制；若reserver参数为true，则保留当前画布上的内容，本次调用drawCanvas绘制的内容覆盖在上面，默认 false 绘图接口和方法

绘图接口和方法 wx.createContext (不推荐使用) 创建并返回绘图上下文。 绘图接口和方法

绘图接口和方法 wx.createCanvasContext(canvasId) 定义 创建 canvas 绘图上下文（指定 canvasId） Tip: 需要指定 canvasId，该绘图上下文只作用于对应的<canvas/> 参数 参数 类型 说明 canvasId String 画布表示，传入定义在<canvas/>的 canvas-id 绘图接口和方法