Canvas implementiert die mobile Front-End-Webseitensignatur nativ

Dieser Artikel stellt Ihnen den Artikel über die native Implementierung der mobilen Front-End-Webseite vor. Er ist für jedes Framework wie vue.js geeignet und hat einen guten Referenzwert in Not.

let c = document.getElementById("canvas")
let canvas = document.createElement("canvas")
let availHeight = document.documentElement.clientHeight
let off = availHeight - 400
canvas.height = '350'
canvas.width = c.clientWidth
c.appendChild(canvas)
let dr = canvas.getContext('2d')
dr.strokeStyle = 'blue'
canvas.addEventListener('touchstart',(e)=>{
  dr.beginPath()
  dr.moveTo(e.changedTouches["0"].pageX,e.changedTouches["0"].pageY-off)
})
canvas.addEventListener('touchmove',(e)=>{
  dr.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY-off)
  dr.stroke()
})
canvas.addEventListener('touchend',(e)=>{
  dr.closePath()
})

Bilder generieren

let img = document.querySelector('canvas').toDataURL()

Wenn Sie es an das Backend senden müssen, können Sie das Backend Base64 oder Blob, Puffer unterstützen lassen

Verwandte Empfehlungen:

Nutzung der neuen h5-Funktionen: Abhören der mit der App gelieferten Return-Taste

So implementieren Sie die Stadtpositionierung auf dem mobilen Endgerät und den Stadtgebietscode-Adcode

Das obige ist der detaillierte Inhalt vonCanvas implementiert die mobile Front-End-Webseitensignatur nativ. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!