【微信开发】原生小程序开发实现画布canvas-2d签字

分享一个原生小程序开发实现画布canvas-2d签字的经验。

（太搞了，官网里面太多东西没有）

画布更新后，方法什么的全是和Web一样的了。（最后搞了很久，到处看。）

 

微信开发官方文档：（全是老版的，也就看看怎么初始化画布的，害~）

Canvas 画布 | 微信开放文档z微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/framework/ability/canvas.html

还得是直接看Web的：

w3school文档：

HTML Canvas 参考手册https://www.w3school.com.cn/tags/html_ref_canvas.asp

了解了一下里面的一些方法什么的。

实现签名其实最主要的就是几个步骤：

1. 初始化画布。可以看看官方文档里面；

2. 在bindtouchstart（绑定的触碰开始事件）中起始一条路径，然后把路径移动到画布中的指定点(moveTo())；

3. 在bindtouchmove（绑定的触碰移动事件）中增加一个新点，然后创建一条从上次指定点到目标点的线(lineTo())；

4. 最后使用stroke()方法来画线条

其中的方法在w3school中都有！可以自己去了解一下。

需要横屏记得在json中加入"pageOrientation": "landscape"，如下：

{
  "usingComponents": {},
  "pageOrientation": "landscape"
}

下面就是源码：（如果想要将画布上的内容导出图片，可以使用wx.canvasToTempFilePath，在“canvas: ”这一栏填入的是我们在初始化时存上的画布对象。）

1.wxml:

<view class="root">

	<canvas 
	id="myCanvas" class="myCanvas" type="2d" 
	bindtouchstart="startTouchClick" 
	bindtouchmove="moveClick"
	bindtouchend="endTouchClick"
	binderror="errorClick"></canvas>

</view>

2.wxss:

.root {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: white;
}

.myCanvas {
	width: 100%;
	height: 100%;
	background-color: white;
}

3.js :

Page({
 
  /**
   * 页面的初始数据
   */
  data: {

    ctx : '',
      
  },
  
  startTouchClick(e){
    console.log("开始触碰事件：",e);

    let ctx = this.data.ctx;

    ctx.beginPath();//起始一条路径，或重置当前路径

    ctx.moveTo(e.changedTouches[0].x, e.changedTouches[0].y) // 把路径移动到画布中的指定点，不创建线条。用 stroke 方法来画线条

  },

  moveClick(e){
    console.log("移动事件：",e);

    let ctx = this.data.ctx;

    ctx.lineTo(e.changedTouches[0].x, e.changedTouches[0].y) // 增加一个新点，然后创建一条从上次指定点到目标点的线。
    ctx.lineWidth=2.5;//设置轨迹的宽度
    ctx.stroke()//用 stroke 方法来画线条
  },

  //触摸结束
  endTouchClick(e){
    console.log("触碰结束事件：",e);
  },

  //误触事件
  errorClick(e){
    console.log("误触事件：",e);
  },

  //初始化画布
  initCanvas(){

    let ctx ;

    wx.createSelectorQuery()
    .select('#myCanvas') // 在 WXML 中填入的 id
    .fields({ node: true, size: true })
    .exec((res) => {

        // Canvas 对象
        const canvas = res[0].node
        this.setData({
          canvas : canvas
        })

        // 渲染上下文
        ctx = canvas.getContext('2d')
        this.setData({
          ctx : ctx
        })

        // Canvas 画布的实际绘制宽高
        const width = res[0].width
        const height = res[0].height

        // 初始化画布大小
        const dpr = wx.getWindowInfo().pixelRatio
        this.setData({
          dpr : dpr
        })

        canvas.width = width * dpr
        canvas.height = height * dpr//设置宽高
        ctx.scale(dpr, dpr)//scale() : 缩放当前绘图至更大或更小

        

        // 清空画布
        ctx.clearRect(0, 0, width, height)
    })

  },
 
  /**
   * 生命周期函数--监听页面加载
   */
    // 生命周期函数--监听页面加载
  onLoad: function (options) {

    this.initCanvas();
    
  },

  onReady(){

  },
 
})