小程序手写签名，签名旋转（钉钉/微信canvas）

###前言
最近公司开发的钉钉小程序要求手写签名，写了一个，先看效果吧，微信小程序也能用。

####第一步，页面布局
从网上找了个手写签名的例子复制一下修改修改，直接贴代码：

//布局代码
<view class="wrapper">
  //签名显示区域
  <view class="handCenter">
    <view class="ats">
      //签名绘制canvas（第一个canvas后面会说）
      <canvas class="handWriting" disable-scroll="true" onTouchStart="uploadScaleStart" onTouchMove="uploadScaleMove" onTouchEnd="uploadScaleEnd" 
        onTap="mouseDown" id="handWriting">
      </canvas>
      //签名旋转canvas（第二个canvas后面会说）
      <canvas class="handWriting2" id="canvas"></canvas>
    </view>
    //操作按钮
    <view class="handBtn">
      <button onTap="subCanvas" class="subBtn">完成</button>
      <button onTap="retDraw" class="delBtn">重置</button>
    </view>
  </view>
  //标题
  <view class="handRight">
    <text class="handTitle">签名</text>
  </view>
</view>

####第二步，css样式（只说重要的，完整的贴在最底下）
因为小程序不支持屏幕旋转（目前好像不支持），所以布局控件会旋转90°，就是下面这个属性

transform: rotate(90deg);

第二个canvas样式要隐藏再第一个底下，并不显示，只做生成旋转图片用：

.ats{
   position: relative;
}
//第一个canvas
.handWriting {
  position: relative;
  background: #fff;
  width: 98%;
  z-index: 99;
  height: 83vh;
  border: 4rpx dashed #e9e9e9;
}
//第二个canvas
.handWriting2{
  position: absolute;
  z-index: 9;
  width: 600rpx;
  height: 300rpx;
  top: 0;
  left: 0;
  /* transform: rotate(90deg); */
  background-color: #FFF;
}

####第三步，JS代码（只说重要的，完整的贴在最底下）
怎么绘制出笔迹那些就不说了，我也是复制的，我就说我遇到并解决的问题。
当我们写完之后，需要保存，我们都知道要用toTempFilePath（将Canvas内容转成 临时图片，微信小程序方法不一样）这个方法，但是保存的图片是竖版的，像这样：

我们要做的就是要旋转一下，总不能旋转第一个canvas吧，体验也太不好了，所以第二个隐藏的canvas就有用了，方法：

  drowImage(path) {
    //这个path是第一个canvas的临时路径，带过来
    var canvasContext = my.createCanvasContext('canvas')//第二个canvas的唯一标识
    canvasContext.scale(0.5, 0.5);//把第一个canvas的缩小一倍，因为我的第一个比较大，可以自己调整，太大显示不全
    canvasContext.translate(0, 300)//这个是原点偏移（第二个canvas的高度是300，宽度是600）
    canvasContext.rotate(-90 * Math.PI / 180)//逆时针旋转90°，拿到横向的签名
    canvasContext.drawImage(path, 0, 0, 300, 600)//把第一个画在第二个上
    canvasContext.draw(true)//注意这地方绘制需要时间，需要把下面获取临时图片延迟一下，不然有可能获取到的是空白就因为draw()方法没有执行完成
    setTimeout(() => {
      //将第二个Canvas内容转成 临时图片
      canvasContext.toTempFilePath({
        success(res) {
          console.log("AAAAAFFFFF" + res.filePath)
          //上传图片
          dd.uploadFile({
            url: 'https://www.aa./api/Qiniuupload/upload',//你的地址
            filePath: res.filePath,
            fileType: 'image',
            fileName: 'file',
            header: {
              'content-type': 'multipart/form-data'
            },
            success: (res) => {
              // res.data 是由你们后端返回的相关数据
              const data = JSON.parse(res.data)
              var urls =  data.data
              var pages = getCurrentPages(); // 获取页面栈
              var prevPage = pages[pages.length - 2]; //