Rumah > hujung hadapan web > Tutorial H5 > canvas原生实现前端网页移动端签名

canvas原生实现前端网页移动端签名

不言
Lepaskan: 2018-07-27 11:22:17
asal
3071 orang telah melayarinya

这篇文章给大家介绍的文章内容是关于canvas原生实现前端网页移动端签名,适用于vue.js react 等任何框架,有很好的参考价值,希望可以帮助到有需要的朋友。

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()
})
Salin selepas log masuk

生成图片

let img = document.querySelector('canvas').toDataURL()
Salin selepas log masuk

如需发送给后端,可以让后端支持base64或者blob、buffer

相关推荐: 

h5新特性的用法:监听App自带的返回键

如何实现移动端的城市定位以及城市区域代码adcode

Atas ialah kandungan terperinci canvas原生实现前端网页移动端签名. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan