在开始写码之前先简单介绍一下我这里的设计，一共分为三层：
咱们首先来实现最核心的canvas组件。
因为小程序的api很多还是回调形式的，Taro也不例外，所以先来把两个主要操作转换成图片和获取尺寸封装成async形式：
接下来看一下jsx部分：
index.module.less
.container{position:relative;overflow:hidden;//用于绘制签名的canvas占满全屏.signCanvas{width:100vw;height:100vh;overflow:hidden;}//把旋转内容的canvas藏起来.saveCanvas{position:absolute;top:-600px;left:0;z-index:-1;}}3、初始化canvas接下来完成初始化工作，简单来说就是把canvas的绘图上下文拿到手，然后配置一些线条颜色粗细等。如果你想添加一些默认的提示文字也可以在这里完成。
由于我的签名组件是全屏显示的，所以这里直接把SystemInfo的屏幕长宽赋值给canvas了，这里有一个很难缠的轨迹绘制偏移问题，下面会细讲。
ok，现在来搞一下绘制的核心逻辑，其实很简单，我们在上面的jsx里可以看到一共监听了两个方法：onTouchStart和onTouchMove，思路很简单：
说白了就是绘制一条折线，折线的圆润程度取决于onTouchMove的触发频率，对应代码如下：
//绘制轨迹信息constlineInfo=useRef({startX:0,startY:0});constcanvasStart=(e)=>{e.preventDefault();lineInfo.current.startX=e.changedTouches[0].clientXlineInfo.current.startY=e.changedTouches[0].clientYcontext.current.beginPath()}constcanvasMove=(e)=>{e.preventDefault();letx=e.changedTouches[0].clientXlety=e.changedTouches[0].clientYcontext.current.moveTo(lineInfo.current.startX,lineInfo.current.startY)context.current.lineTo(x,y)context.current.stroke()context.current.draw(true)lineInfo.current.startX=xlineInfo.current.startY=y}这里我们使用useRef保存上个坐标信息而不是useState，原因在于我们是直接和canvasapi交互的，没必要在react层面再添加一个高频的重渲染操作。
并且注意其中的e.preventDefault()，如果不阻止默认行为的话每次触摸开始都会有一个拖拽屏幕的效果。
至此，我们已经完成了核心的签名功能：
这个还不是固定偏移，而是越往右下角偏移的越大，所以很多人初见都会一脸懵逼。去网上搜了搜，按照教程里的做法设置了canvas长宽之后发现还是没解决，很难受。这里就来详细的说明一下。
导致这个问题的核心是：canvas的DPI和屏幕的DPI不同！
为了理解这个问题，我们先来做个小实验，首先回到上面的样式文件里，把canvas组件的长宽从全屏设置为四分之一屏：
.container{//...//用于绘制签名的canvas占满全屏.signCanvas{//把下面这俩从100改为50width:50vw;height:50vh;overflow:hidden;}//...}然后回到浏览器再试一下：
发现了么？绘制出来的笔迹恰好是我们实际触摸位置的四分之一！打开F12看一下：
这里可以看到Taro的Canvas组件由一个外层的html元素和内部的原生canvas构成，外层的taro-canvas-core容器负责监听touch事件，而内部的原生canvas负责绘制内容。还记得之前我们代码里初始化canvas时赋值的长宽么：
useReady(()=>{constquery=Taro.createSelectorQuery()query.select('#myCanvas').context(res=>{if(!res.context)return//————————————————注意这里————————————————const{windowWidth,windowHeight}=Taro.getSystemInfoSync()res.context.canvas.width=windowWidth;res.context.canvas.height=windowHeight;//...}).exec()})在这里我们把整个window的宽高赋值给了canvas，也就是说。在只有四分之一面积的情况下，canvas里塞下了和整个屏幕一样多的像素点！
这下就清晰了，touch事件传给我们基于屏幕的坐标，而canvas的分辨率和屏幕一样，但是尺寸只有屏幕的四分之一（即刚才提到的DPI不一致），所以绘制出来的线条就是我们实际触摸轨迹的四分之一等比映射。
明白了原因想解决就简单了，既然实际尺寸是四分之一，那我们把canvas的分辨率也设置为屏幕的四分之一，或者把touch事件的坐标放大为原来的两倍，保证canvas和屏幕的DPI是一致的就可以：
方法一：缩小canvas分辨率
useReady(()=>{constquery=Taro.createSelectorQuery()query.select('#myCanvas').context(res=>{if(!res.context)returnconst{windowWidth,windowHeight}=Taro.getSystemInfoSync()//把canvas分辨率也改为四分之一res.context.canvas.width=windowWidth/2;res.context.canvas.height=windowHeight/2;//...}).exec()})效果如下：
方法二：放大touch事件的坐标：
constcanvasStart=(e)=>{e.preventDefault();//——————————看后面的乘以2——————————lineInfo.current.startX=e.changedTouches[0].clientX*2lineInfo.current.startY=e.changedTouches[0].clientY*2context.current.beginPath()}constcanvasMove=(e)=>{e.preventDefault();//——————————这里也乘以2了——————————letx=e.changedTouches[0].clientX*2lety=e.changedTouches[0].clientY*2//...}效果如下：
可以看到，笔迹已经跟手了，并且我们还可以注意到，由于方法二的分辨率更高，所以他的笔迹更细腻一点。
这个笔迹偏移问题的核心在于canvas和屏幕的DPI不匹配，所以说我们单纯抄网上教程的配置是没什么用的，你需要根据自己的canvas宽高来配置，例如UI让你把签名区域设置为100%宽度，80%高度。你在css里写width:100vw;height:80vh;，那么在初始化canvasContext的时候你就需要canvas.height=windowHeight*0.8;
简单说就是style里的宽高比例要和canvas的实际像素比例相同。
现在基本的逻辑都完成了，再把一些交互的api封装好，通过forwardRef转发出去就可以了，组件完成代码如下，导出图片的逻辑在saveAsImage，有兴趣的同学可以读一下：
上面的签名canvas组件可以拿到其他小程序项目里用，而现在要做的这个组件就是用来实现本项目的UI需求的，这部分没什么难点，直接贴代码了：
src\pages\sign\index.tsx
.container{position:relative;.btns{position:absolute;top:0;left:0;width:100vh;transform-origin:00;//注意这里，手动把按钮组横了过来transform:rotateZ(90deg)translateY(-100%);display:flex;justify-content:center;padding:32px0px;.btn{margin:0px16px;width:20vh;}}}因为小程序内置的横屏会把标题也横过来，导致签名区域变窄，所以这里选择手写横屏而不是直接用小程序内置的横屏配置。
并且注意onSubmit中，从routerparams里读了一个type，然后把导出的签名图base64发射到名字为type的事件上。所以说，想要发起签名的页面需要在导航到本页前先通过Taro.eventCenter绑定一个事件，然后把事件名字通过routerparams（即type变量）告诉签名页，这样让双方可以进行签名图的传递。
最后，我们来实现如何发起签名和如何接受并显示得到的签名图：
这里需要注意的是，我用的是Taro内置的Image组件，而不是taro-vant的Image，因为这里有个小坑，taro-vant的Image没法直接显示base64图片，没找到原因，Taro的Image就可以。