「这是我参与2022首次更文挑战的第27天，活动详情查看：2022首次更文挑战」

前言

上一篇已经介绍了部分基础的API，这一篇继续总结剩下的API方法。

路径相关API

arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise)

这个方法的意思是创建一条弧线

创建一个圆可以指定起始弧度为 0，终止弧度为 2 * Math.PI。
用 stroke 或者 fill 方法来在 canvas 中画弧线。 number x：圆心的 x 坐标
number y：圆心的 y 坐标
number r：圆的半径
number sAngle：起始弧度，单位弧度（在3点钟方向）
number eAngle：终止弧度
boolean counterclockwise：弧度的方向是否是逆时针

     const ctx = wx.createCanvasContext('poster')
   ctx.arc(30, 30, 25, Math.PI, 2*Math.PI,false)
	 ctx.setStrokeStyle('#FF0000')
	ctx.stroke()
	ctx.draw()
			   
	ctx.arc(200, 75, 50, 0, 1.5 * Math.PI, true)
	 ctx.setFillStyle('#FF0000')
	 ctx.fill()
	 ctx.draw(true)//true表示保留之前绘制内容

第一个draw表示在圆心(30,30)处画一个半径25的，其实角度为180度到360度的圆弧，第二个draw画的圆弧会被填充。如图所示

beginPath()

开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边

在最开始的时候相当于调用了一次 beginPath。
同一个路径内的多次 setFillStyle、setStrokeStyle、setLineWidth等设置，以最后一次设置为准

moveTo(number x, number y)

把路径移动到画布中的指定点，不创建线条。用 stroke 方法来画线条

number x：目标位置的 x 坐标 number y：目标位置的 y 坐标

lineTo(number x, number y)

增加一个新点，然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条

number x：目标位置的 x 坐标
number y：目标位置的 y 坐标

closePath()

关闭一个路径。会连接起点和终点。如果关闭路径后没有调用 fill 或者 stroke 并开启了新的路径，那之前的路径将不会被渲染

上面三个方法使用如下

const ctx = wx.createCanvasContext('poster')
			     ctx.moveTo(30, 30)
			     ctx.lineTo(100, 30)
			     ctx.lineTo(100, 100)
			     ctx.closePath()
			     ctx.stroke()
			     ctx.draw()

如果没有使用closepath，那么moveTo到lineTo是一条直线，接着lineTo在连着画下一条。如果加上closePath，那么将上面的线条连接形成封闭。

quadraticCurveTo(number cpx, number cpy, number x, number y)

创建二次贝塞尔曲线路径。曲线的起始点为路径中前一个点。
number cpx：贝塞尔控制点的 x 坐标
number cpy：贝塞尔控制点的 y 坐标
number x：结束点的 x 坐标
number y：结束点的 y 坐标

bezierCurveTo(number cpx1, number cpy1,number cpx2, number cpy2, number x, number y)

创建三次方贝塞尔曲线路径。 number cpx1：贝塞尔控制点1的 x 坐标
number cpy1：贝塞尔控制点1的 y 坐标
number cpx2：贝塞尔控制点3的 x 坐标
number cpy3：贝塞尔控制点3的 y 坐标
number x：结束点的 x 坐标
number y：结束点的 y 坐标

贝塞尔曲线API相对来说用的比较少，也是难度较高的一个。

文字API

fillText(string text, number x, number y, number maxWidth)

在画布上绘制被填充的文本 string text：在画布上输出的文本 number x：绘制文本的左上角 x 坐标位置 number y：绘制文本的左上角 y 坐标位置 number maxWidth：需要绘制的最大宽度，可选

setFontSize(number fontSize)

设置字体的字号

setTextBaseline(string textBaseline)

设置文字的竖直对齐 textBaseline取值
top 顶部对齐
bottom 底部对齐
middle 居中对齐
normal 默认值

                               const ctx = wx.createCanvasContext('poster')

			       ctx.setStrokeStyle('red')
			        ctx.moveTo(5, 100)
			        ctx.lineTo(295, 100)
			        ctx.stroke()
			     
			        ctx.setFontSize(20)
			     
			        ctx.setTextBaseline('top')
			        ctx.fillText('top', 10, 100)
			     
			        ctx.setTextBaseline('middle')
			        ctx.fillText('middle', 50, 100)
			     
			        ctx.setTextBaseline('bottom')
			        ctx.fillText('bottom', 120, 100)
			     
			        ctx.setTextBaseline('normal')
			        ctx.fillText('normal', 200, 100)
			     
			        ctx.draw()

如图这设置文字的竖直对齐，即文字的基线，不同的设置会在不同的位置开始绘制。

setTextAlign(string align)

设置文字的对齐

                        const ctx = wx.createCanvasContext('poster')
			 ctx.setStrokeStyle('red')
			   ctx.moveTo(150, 20)
			   ctx.lineTo(150, 170)
			   ctx.stroke()

			   ctx.setFontSize(15)
			   ctx.setTextAlign('left')
			   ctx.fillText('left', 150, 60)

			   ctx.setTextAlign('center')
			   ctx.fillText('center', 150, 80)

			   ctx.setTextAlign('right')
			   ctx.fillText('right', 150, 100)

			   ctx.draw()

这是设置文字的对齐方式，左对齐的话就是文字的左边，就是开始位置对齐右边就是最右边对齐。

measureText(string text)

测量文本尺寸信息。目前仅返回文本宽度。这个就是测量文字宽度，如下公式可以得到

let width=ctx.measureText('我来了').width

总结

本文介绍了canvas绘制路径相关的API和文字API，都是比较常用的，尤其是文字和圆弧比较频繁，多使用。

微信小程序绘图API-canvas(二)

前言