因为在微信小程序绘图过程中,这两个方法把路径移动到画布中的指定点moveTo和添加一个新点lineTo的对象方法一般一起使用,所以,这里就把这两个方法放在一个教程里面讲解对比,看看这两个方法如何使用。

moveTo方法:

  把路径移动到画布中的指定点,不创建线条。

  Tip: 用 stroke() 方法来画线条

  如果使用对象方法moveTo(x,y)的话,这个方法会把路径移动到参数(x 表示x轴,y表示y轴)指定的位置,但是,在移动过程中并不划线。例如,我们用笔在纸上面从一个点(不要抬起笔)划到另一个点,这样就创建一个条线,但是,当我们拿起笔从一个点移动到另一个点时,并没有接触到纸,然后,把笔落到纸上面,这样我们就从一个点移动到了另一个点,但是,这中间因为没有接触到纸,所以,没有形成一条线,moveTo方法就是属于后一种情况,只是把坐标移动到了另一个点,而不创建线。

示例:

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()
moveTo

  上面的例子成功划了两条平等线,之所以,能画出这两条平等线是因为,使用了两次moveTo和lineTo来确定两个点后划线。


lineTo

  lineTo 方法增加一个新点,然后创建一条从上次指定点到目标点的线。

  Tip: 用 stroke() 方法来画线条

示例:
const ctx = wx.createCanvasContext('myCanvas')
ctx.moveTo(10, 10)
ctx.rect(10, 10, 100, 50)
ctx.lineTo(110, 60)
ctx.stroke()
ctx.draw()
lineTo

  先用ctx.moveTo(10, 10)移动到座标为(10,10)点上面,然后,通过方法ctx.lineTo(110, 60)添加一个新的座标,这样根据两点成一线,就创建一条从(10,10)座标到(110,60)座标之间的一条线,并且,使用stroke()进行描边,描边后一条线就就完成了,然后,使用方法ctx.draw()所这条线显示在前端视图层。