在使用微信小程序开发中，有的需求场景中会需要用户手写签名、或者绘制一些路径，通常会使用 canvas 来实现这种需求

在小程序的开发官方文档中我们可以查找到相关的 canvas 接口使用方法，在文档中我们看到微信官方的提示

2.9.0 起支持一套新 Canvas 2D 接口（需指定 type 属性），同时支持同层渲染，原有接口不再维护。相关api：获取 canvas 实例。

而官方文档中的说明也确实是旧版的 canvas 文档，那么在本文中将详细介绍一下新版和旧版的 canvas 绘制签名的方法

在本例中，使用了小程序的开发框架 mpx， mpx 使用的是微信小程序原生的标签和语法，因此，可以直接将代码复制到项目中进行使用。

介绍一下如何使用旧版的小程序 canvas 接口

需要注意的是：此处不能在 canvas 的元素中添加 type=“2d”，如果添加了该属性，则小程序将会把此 canvas 解析为新版本的 canvas2D

在脚本中添加处理函数

此处需要注意的是：

由于不需要将 canvas 的实例在模板中使用，因此此处将 ctx 声明为了局部变量

使用旧版的 canvas 接口，我们可以将初始化过程放在页面挂载的 onLoad 事件中，在初始化过程中通过 wx.createCanvasContext方法创建 canvas 实例，使用框架的时候需要将 this 值作为第二个参数传入 wx.createCanvasContext 方法中，否则获取不到 canvas 的实例

在 touchstart 事件开始的时候，我们需要获取到触摸的起始位置，也就是通过事件中的 touches，该属性返回点击的位置数组，此时我们将 canvas 的起始位置设置到点击位置

在处理绘制事件的时候，我们一定要按照 lineTo() > stroke() > draw() > moveTo() 的方式来绘制，有的同学就会说了，为什么要再添加一个 moveTo() 呢？我们以动图表现一下0-0

没有使用 moveTo()的情况：

图中可以看出如果我们移动的过快，就会出现虚线的点

添加了 moveTo()的效果:

该旧版接口目前微信小程序已经不再继续维护了，但是如果要适配 v2.9.0 之前的微信版本基础库的话，就需要使用旧版的接口了

设置画布的大小，此处我设置了整个屏幕的大小

微信小程序中新版的 canvas 是基于 Web 标准的 canvas2D 来做渲染的，因此相关的接口文档可以从 MDN 中的 canvas2D 章节中来查看

下面就介绍一下如何使用 canvas2D 来实现签名