The use of Canvas is also supported in wechat applet.

1. First add the component to the WXML page:

<canvas class="sign" canvas-id="sign" bindtouchmove="move" bindtouchstart="start" bindtouchend="end" bindtouchcancel="cancel" bindlongtap="tap" disable-scroll="true" binderror="error">
</canvas>
Copy the code

2. Initialize the required variables in the js of the applet as follows:

Var content = null; var touchs = [];Copy the code
Data: {imgList:[], signImage:' '
  }
Copy the code

3. Write the following function in the js Page of the small program:

// The canvas touch moves the start gesture in response to start:function (event) {
    // console.log("Touch begins" + event.changedTouches[0].x);
    // console.log("Touch begins"+ event.changedTouches[0].y); // Get the x,y at the beginning of the touchletpoint = { x: event.changedTouches[0].x, y: event.changedTouches[0].y } touchs.push(point); }, // The canvas's touch move gesture responds to move:function (e) {
    let point = { x: e.touches[0].x, y: e.touches[0].y }
    touchs.push(point);
    if(touchs.length >= 2) { this.draw(touchs); }}, // Canvas touch move end gesture response end:function (e) {
    console.log("End of touch"+ e); // Clear the trace arrayfor (leti = 0; i < touchs.length; i++) { touchs.pop(); }}, // The canvas touch cancels the response cancel:function (e) {
    console.log("Touch Cancel"+ e); }, // Canvas long press gesture in response to tap:function (e) {
    console.log("Long press" + e);
  },
  error: function (e) {
    console.log("Canvas touch error"+ e); }, /** * lifecycle function -- listen for page load */ onLoad:function(options) {// Get the Canvas context content = wx.createcanVasContext ('sign'); // Set the line color content.setstrokestyle ("# 000"); // Set the line width content.setlineWidth (3); // Set the ends of the line to be more rounded content.setlinecap ('round'); // Make the connection between two lines more rounded content.setlineJoin ('round'); }, // draw draw:function (touchs) {
    let point1 = touchs[0];
    let point2 = touchs[1];
    touchs.shift();
    content.moveTo(point1.x, point1.y);
    content.lineTo(point2.x, point2.y);
    content.stroke();
    content.draw(true); }, // Clear operation clearClick:function() {// Clear the canvas content.clearRect(0, 0,750, 700); content.draw(true); }, // Save the image saveClick:function () {
    var that = this;
    wx.canvasToTempFilePath({
      canvasId: 'firstCanvas',
      success: function(res) {// Print the image path console.log(res.tempFilepath); SetData ({signImage: res.tempFilepath})}}Copy the code