最近では、主にキャンバスの線描画機能とモバイルのタッチイベントを組み合わせた署名機能に取り組んでいる。
js部分はこんな感じです。
window.onload = function() { new lineCanvas({ el: document.getElementById(canvas),//キャンバスの親divを描画clearEl: document.getElementById(clearCanvas),//クリアボタンsaveEl: document.getElementById(saveCanvas) ,//保存ボタン// linewidth:1,//線の太さ、オプション// color:black,//線の色、オプション// background:#ffffff//ライン背景、オプション});};function lineCanvas(obj) { this.linewidth = 1; this.color = #000000; this.background = #ffffff; for (var i in obj) [i] = obj[i] }; this.canvas = document.createElement(canvas); = this.canvas.getContext(2d); this.canvas.width = this.el.clientHeight; this.cxt.fillStyle = this.cxt.fillRect( 0, 0, this.canvas.width, this.canvas.width); this.cxt.lineWidth = this.linewidth; this.cxt.lineCap =round; //描画を開始 this.canvas.addEventListener(touchstart, function(e) { this.cxt.beginPath(); this.cxt.moveTo(e) .changedTouches[0].pageX, e.changedTouches[0].pageY) }.bind(this), false); //描画 this.canvas.addEventListener(touchmove, function(e) { this.cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY); this.cxt.ストローク(); } .bind(this), false); //描画終了 this.canvas.addEventListener(touchend, function() { this.cxt.closePath(); }.bind(this), false); //キャンバスをクリア this.clearEl.addEventListener(click, function() { this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height); } .bind(this), false); //画像を保存し、base64 に直接転送します this.saveEl.addEventListener(click, function() { var imgBase64 = this.canvas.toDataURL(); console.log(imgBase64) }.bind(this);};これはレンダリングです:
htmlとcssを貼り付ける
<div id=canvas> <p id=clearCanvas>クリア</p> <p id=saveCanvas>保存</p></div>html,body{ width: 100%; height: 100%;}#canvas{幅: 100%; 高さ: 100%; 位置: 相対;}#canvas{ 表示: ブロック;}#clearCanvas{ 幅: 50%; 高さ: 40px;行の高さ: 40 ピクセル; 位置: 絶対; 左: 0; 境界線: 1 ピクセル; }#saveCanvas{ 幅: 50%;行の高さ: 40 ピクセル; テキストの位置: 絶対; 下: 0; 境界線: 1 ピクセルz インデックス: 1;}以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。