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

绘图接口和方法 canvasContext.setFontSize 定义 设置字体的字号。 参数 参数 类型 说明 fontSize Number 字体的字号 例子 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() 绘图接口和方法

绘图接口和方法 canvasContext.translate 定义 对当前坐标系的原点(0, 0)进行变换，默认的坐标系原点为页面左上角。 参数 参数 类型 说明 x Number 水平坐标平移量 y Number 竖直坐标平移量 例子 const ctx = wx.createCanvasContext('myCanvas') ctx.strokeRect(10, 10, 150, 100) ctx.translate(20, 20) ctx.strokeRect(10, 10, 150, 100) ctx.translate(20, 20) ctx.strokeRect(10, 10, 150, 100) ctx.draw() 绘图接口和方法

绘图接口和方法 canvasContext.rotate 定义 以原点为中心，原点可以用 translate方法修改。顺时针旋转当前坐标轴。多次调用rotate，旋转的角度会叠加。 参数 参数 类型 说明 rotate Number 旋转角度，以弧度计(degrees * Math.PI/180；degrees范围为0~360) const ctx = wx.createCanvasContext('myCanvas') ctx.strokeRect(100, 10, 150, 100) ctx.rotate(20 * Math.PI / 180) ctx.strokeRect(100, 10, 150, 100) ctx.rotate(20 * Math.PI / 180) ctx.strokeRect(100, 10, 150, 100) ctx.draw() 绘图接口和方法

绘图接口和方法 canvasContext.scale 定义 在调用scale方法后，之后创建的路径其横纵坐标会被缩放。多次调用scale，倍数会相乘。 参数 参数 类型 说明 scaleWidth Number 横坐标缩放的倍数 (1 = 100%，0.5 = 50%，2 = 200%) scaleHeight Number 纵坐标轴缩放的倍数 (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.bezierCurveTo 定义 创建三次方贝塞尔曲线路径。 Tip: 曲线的起始点为路径中前一个点。 参数 参数 类型 说明 cp1x Number 第一个贝塞尔控制点的 x 坐标 cp1y Number 第一个贝塞尔控制点的 y 坐标 cp2x Number 第二个贝塞尔控制点的 x 坐标 cp2y Number 第二个贝塞尔控制点的 y 坐标 x Number 结束点的 x 坐标 y Number 结束点的 y 坐标 例子 const ctx = wx.createCanvasContext('myCanvas') // Draw points ctx.beginPath() ctx.arc(20, 20, 2, 0, 2 * Math.PI) ctx.setFillStyle('red') ctx.fill() ctx.beginPath() ctx.arc(200, 20, 2, 0, 2 * Math.PI) ctx.setFillStyle('lightgreen') ctx.fill() ctx.beginPath() ctx.arc(20, 100, 2, 0, 2 * Math.PI) ctx.arc(200, 100, 2, 0, 2 * Math.PI) ctx.setFillStyle('blue') ctx.fill() ctx.setFillStyle('black') ctx.setFontSize(12) // Draw guides ctx.beginPath() ctx.moveTo(20, 20) ctx.lineTo(20, 100) ctx.lineTo(150, 75) ctx.moveTo(200, 20) ctx.lineTo(200, 100) ctx.lineTo(70, 75) ctx.setStrokeStyle('#AAAAAA') ctx.stroke() // Draw quadratic curve ctx.beginPath() ctx.moveTo(20, 20) ctx.bezierCurveTo(20, 100, 200, 100, 200, 20) ctx.setStrokeStyle('black') ctx.stroke()...

绘图接口和方法 canvasContext.quadraticCurveTo 定义 创建二次贝塞尔曲线路径。 Tip: 曲线的起始点为路径中前一个点。 参数 参数 类型 说明 cpx Number 贝塞尔控制点的x坐标 cpy Number 贝塞尔控制点的y坐标 x Number 结束点的x坐标 y Number 结束点的y坐标 例子 const ctx = wx.createCanvasContext('myCanvas') // Draw points ctx.beginPath() ctx.arc(20, 20, 2, 0, 2 * Math.PI) ctx.setFillStyle('red') ctx.fill() ctx.beginPath() ctx.arc(200, 20, 2, 0, 2 * Math.PI) ctx.setFillStyle('lightgreen') ctx.fill() ctx.beginPath() ctx.arc(20, 100, 2, 0, 2 * Math.PI) ctx.setFillStyle('blue') ctx.fill() ctx.setFillStyle('black') ctx.setFontSize(12) // Draw guides ctx.beginPath() ctx.moveTo(20, 20) ctx.lineTo(20, 100) ctx.lineTo(200, 20) ctx.setStrokeStyle('#AAAAAA') ctx.stroke() // Draw quadratic curve ctx.beginPath() ctx.moveTo(20, 20) ctx.quadraticCurveTo(20, 100, 200, 20) ctx.setStrokeStyle('black') ctx.stroke() ctx.draw() 针对 moveTo(20, 20) quadraticCurveTo(20, 100, 200, 20)的三个关键坐标如下： 红色：起始点(20, 20) 蓝色：控制点(20, 100) 绿色：终止点(200, 20) 绘图接口和方法

绘图接口和方法 canvasContext.lineTo 定义 lineTo方法增加一个新点，然后创建一条从上次指定点到目标点的线。 Tip: 用stroke()方法来画线条 参数 参数 类型 说明 x Number 目标位置的x坐标 y Number 目标位置的y坐标 例子 const ctx = wx.createCanvasContext('myCanvas') ctx.moveTo(10, 10) ctx.rect(10, 10, 100, 50) ctx.lineTo(110, 60) ctx.stroke() ctx.draw() 绘图接口和方法

绘图接口和方法 canvasContext.moveTo 定义 把路径移动到画布中的指定点，不创建线条。 Tip: 用stroke()方法来画线条 参数 参数 类型 说明 x Number 目标位置的x坐标 y Number 目标位置的y坐标 例子 const ctx = wx.createCanvasContext('myCanvas') ctx.moveTo(10, 10) ctx.lineTo(100, 10) ctx.moveTo(10, 50) ctx.lineTo(100, 50) ctx.stroke() ctx.draw() 绘图接口和方法

绘图接口和方法 canvasContext.closePath 定义 关闭一个路径 Tip: 关闭路径会连接起点和终点。 Tip: 如果关闭路径后没有调用fill()或者stroke()并开启了新的路径，那之前的路径将不会被渲染。 例子 const ctx = wx.createCanvasContext('myCanvas') ctx.moveTo(10, 10) ctx.lineTo(100, 10) ctx.lineTo(100, 100) ctx.closePath() ctx.stroke() ctx.draw() const ctx = wx.createCanvasContext('myCanvas') // begin path ctx.rect(10, 10, 100, 30) ctx.closePath() // 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.beginPath 定义 开始创建一个路径，需要调用fill或者stroke才会使用路径进行填充或描边。 Tip: 在最开始的时候相当于调用了一次beginPath()。 Tip: 同一个路径内的多次setFillStyle()、setStrokeStyle()、setLineWidth()等设置，以最后一次设置为准。 例子 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() 绘图接口和方法