ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。