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

绘图接口和方法 canvasContext.stroke 定义 画出当前路径的边框。默认颜色色为黑色。 Tip:stroke()描绘的的路径是从beginPath()开始计算，但是不会将strokeRect()包含进去，详情见例二。 例子 const ctx = wx.createCanvasContext('myCanvas') ctx.moveTo(10, 10) ctx.lineTo(100, 10) ctx.lineTo(100, 100) ctx.stroke() ctx.draw() 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.fill 定义 对当前路径中的内容进行填充。默认的填充色为黑色。 Tip: 如果当前路径没有闭合，fill()方法会将起点和终点进行连接，然后填充，详情见例一。 Tip:fill()填充的的路径是从beginPath()开始计算，但是不会将fillRect()包含进去，详情见例二。 例子 const ctx = wx.createCanvasContext('myCanvas') ctx.moveTo(10, 10) ctx.lineTo(100, 10) ctx.lineTo(100, 100) ctx.fill() ctx.draw() const ctx = wx.createCanvasContext('myCanvas') // begin path ctx.rect(10, 10, 100, 30) ctx.setFillStyle('yellow') ctx.fill() // begin another path ctx.beginPath() ctx.rect(10, 40, 100, 30) // only fill this rect, not in current path ctx.setFillStyle('blue') ctx.fillRect(10, 70, 100, 30) ctx.rect(10, 100, 100, 30) // it will fill current path ctx.setFillStyle('red') ctx.fill() ctx.draw() 绘图接口和方法

绘图接口和方法 canvasContext.clearRect 定义 清除画布上在该矩形区域内的内容。 Tip: clearRect 并非画一个白色的矩形在地址区域，而是清空，为了有直观感受，对 canvas 加了一层背景色。 <canvas canvas-id="myCanvas" style="border: 1px solid; background: #123456;"/> 参数 参数 类型 说明 x Number 矩形区域左上角的x坐标 y Number 矩形区域左上角的y坐标 width Number 矩形区域的宽度 height Number 矩形区域的高度 例子 const ctx = wx.createCanvasContext('myCanvas') ctx.setFillStyle('red') ctx.fillRect(0, 0, 150, 200) ctx.setFillStyle('blue') ctx.fillRect(150, 0, 150, 200) ctx.clearRect(10, 10, 150, 75) ctx.draw() 绘图接口和方法

绘图接口和方法 canvasContext.strokeRect 定义 画一个矩形(非填充)。 Tip：用setFillStroke()设置矩形线条的颜色，如果没设置默认是黑色。 参数 参数 类型 范围 说明 x Number   矩形路径左上角的x坐标 y Number   矩形路径左上角的y坐标 width Number   矩形路径的宽度 height Number   矩形路径的高度 例子 const ctx = wx.createCanvasContext('myCanvas') ctx.setStrokeStyle('red') ctx.strokeRect(10, 10, 150, 75) ctx.draw() 绘图接口和方法

绘图接口和方法 canvasContext.fillRect 定义 填充一个矩形。 Tip: 用setFillStyle()设置矩形的填充色，如果没设置默认是黑色。 参数 参数 类型 说明 x Number 矩形路径左上角的x坐标 y Number 矩形路径左上角的y坐标 width Number 矩形路径的宽度 height Number 矩形路径的高度 例子 const ctx = wx.createCanvasContext('myCanvas') ctx.setFillStyle('red') ctx.fillRect(10, 10, 150, 75) ctx.draw() 绘图接口和方法

绘图接口和方法 canvasContext.rect 定义 创建一个矩形。 Tip: 用fill()或者stroke()方法将矩形真正的画到 canvas 中。 参数 参数 类型 说明 x Number 矩形路径左上角的x坐标 y Number 矩形路径左上角的y坐标 width Number 矩形路径的宽度 height Number 矩形路径的高度 例子 const ctx = wx.createCanvasContext('myCanvas') ctx.rect(10, 10, 150, 75) ctx.setFillStyle('red') ctx.fill() ctx.draw() 绘图接口和方法

绘图接口和方法 canvasContext.setMiterLimit 定义 设置最大斜接长度，斜接长度指的是在两条线交汇处内角和外角之间的距离。 当setLineJoin()为 miter 时才有效。超过最大倾斜长度的，连接处将以 lineJoin 为 bevel 来显示 参数 参数 类型 说明 miterLimit Number 最大斜接长度 例子 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.setLineJoin 定义 设置线条的交点样式。 参数 参数 类型 范围 说明 lineJoin String ‘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.setLineCap 定义 设置线条的端点样式。 参数 参数 类型 范围 说明 lineCap String ‘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.setLineWidth 定义 设置线条的宽度。 参数 参数 类型 说明 lineWidth Number 线条的宽度(单位是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() 绘图接口和方法