Canvas はフロントエンド Web ページのモバイル署名をネイティブに実装します

この記事は、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 の新機能の使用: リターン キーを監視するアプリが付属しています

モバイルで都市の位置情報と市外局番のアドコードを実装する方法

以上がCanvas はフロントエンド Web ページのモバイル署名をネイティブに実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。