ホームページ >ウェブフロントエンド >H5 チュートリアル >Canvas はフロントエンド Web ページのモバイル署名をネイティブに実装します

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

不言
不言オリジナル
2018-07-27 11:22:172981ブラウズ

この記事は、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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。