Implements free movement of lines on the applet canvas to learn about the applet canvas.

Create a new paint page in the applet development tool.

Applet canvas Component
Open paint.wxml

<canvas  canvas-id="canvasline" class="canvasboard"></canvas>

Add a canvas and set the component's identity to canvasline so you can't see what's changed.

Set Style to paint.wxss

.canvasboard{
  background-color: #e2ebf3;
  width: 400px;
  height: 400px;
}

Save so you see a square background is the canvas.As shown in the figure,

Applet Canvas API.
moveTo(), moves the path to the specified point on the canvas without creating a line.
lineTo(), add a new point, and create a line from the last specified point to the target point.Draw lines using the stroke method
These two methods are used to draw lines on canvas.
To create a drawing context on the canvas first
Open paint.js, topmost
var ctx=wx.createCanvasContext('canvasline')
First try to draw a line on the code.
Inside onLoad, save.
ctx.moveTo(50, 50)
ctx.lineTo(200, 50)
ctx.stroke()
ctx.draw()
As shown in the figure,

To move the line freely, add touch to start, move the event
paint.wxml

<canvas canvas-id="canvasline" class="canvasbpard" bindtouchstart='handtouchstart' bindtouchmove="handtouchmove"></canvas>

Write touch start and move events to get coordinates for start and move touch

// Touch Start
  handtouchstart: function (e) {
    let startx = e.changedTouches[0].x
    let starty = e.changedTouches[0].y
  },
  // Touch screen movement
  handtouchmove: function (e) {
    let movex = e.changedTouches[0].x
    let movey = e.changedTouches[0].y
  },

This takes the position where the touch moves.

Add new x, y, newx, newy variables to start and move positions, respectively

data: {
    x:0,
    y:0,
    newx: 0,
    newy: 0,
  },

Start Touching for Position

handtouchstart: function (e) {
    let startx = e.changedTouches[0].x
    let starty = e.changedTouches[0].y
    this.setData({
      x: startx,
      y: starty,
    })
  },

 
Move to Position

 handtouchmove: function (e) {
    let movex = e.changedTouches[0].x
    let movey = e.changedTouches[0].y
    this.setData({
      newx: movex,
      newy: movey,
    })
},

 
Get the location and move over the code you just wrote on Load.

// Touch screen movement
  handtouchmove: function (e) {
    let movex = e.changedTouches[0].x
    let movey = e.changedTouches[0].y
    this.setData({
      newx: movex,
      newy: movey,
    })
    ctx.moveTo(this.data.x, this.data.y)
    ctx.lineTo(this.data.newx, this.data.newy)
    ctx.stroke()
    ctx.draw()
  },

Save it and try it.As shown in the figure,

It's just drawing straight lines, not lines that I want and move freely.
Look at the code above, to move the line freely, the starting position of the ctx.moveTo(this.data.x, this.data.y) here also changes with the touch movement.This tells you what to do, and as you move, updates the value of the starting position x, y.

// Touch screen movement
  handtouchmove: function (e) {
    let movex = e.changedTouches[0].x
    let movey = e.changedTouches[0].y
    this.setData({
      newx: movex,
      newy: movey,
    })
    ctx.moveTo(this.data.x, this.data.y)
    ctx.lineTo(this.data.newx, this.data.newy)
    ctx.stroke()
    ctx.draw()
    this.setData({
      x: movex,
      y: movey,
    })
  },

Save it and try it.As shown in the figure,

A point is moving, but not in line.A straight line was drawn just now, and the next one disappeared.
If you look at the applet canvas draw method, you find that you only need to add a true parameter.
If the parameter is true, the contents on the current canvas are retained, and the contents drawn by this call drawCanvas are overwritten with default false.

 handtouchmove: function (e) {
    let movex = e.changedTouches[0].x
    let movey = e.changedTouches[0].y
    this.setData({
      newx: movex,
      newy: movey,
    })
    ctx.moveTo(this.data.x, this.data.y)
    ctx.lineTo(this.data.newx, this.data.newy)
    ctx.stroke()
    ctx.draw(true)
    this.setData({
      x: movex,
      y: movey,
    })
  },

 
Save it and try it, as shown in the figure,