Canvas는 기본적으로 프런트 엔드 웹 페이지 모바일 서명을 구현합니다.

이 글은 프론트엔드 웹 모바일 서명의 캔버스 네이티브 구현에 대한 글을 소개합니다. vue.js 반응과 같은 어떤 프레임워크에도 적합합니다. 친구들에게 도움이 되기를 바랍니다. 필요합니다.

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()
})

사진 생성

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

백엔드로 보내야 하는 경우 백엔드에서 base64 또는 blob, 버퍼를 지원하도록 할 수 있습니다

# 🎜🎜#관련 추천:

h5 새로운 기능 사용: 앱과 함께 제공되는 반환 키 듣기

모바일 측에서 도시 위치 구현 방법 및 도시 지역 코드 adcode

위 내용은 Canvas는 기본적으로 프런트 엔드 웹 페이지 모바일 서명을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!