var canvas, board;

canvas = document.getElementById('myCanvas');

canvas.height = 300;

canvas.width = 400;

board = canvas.getContext('2d');

board.lineWidth = 1; //設置畫筆粗細

board.strokeStyle = "#f00";

board.lineJoin = "round"; //設置畫筆軌跡基于圓點拼接

var mousePress = false;

var last = null;

function beginDraw(event) {

mousePress = true;

}

function endDraw(event) {

mousePress = false;

event.preventDefault();

last = null;

}

function drawing(event) {

event.preventDefault();

if (!mousePress) return;

var xy = GetPos(event);

if (last != null) {

board.beginPath();

board.moveTo(last.x, last.y);

board.lineTo(xy.x, xy.y);

board.stroke();

}

last = xy;

}

function GetPos(event) {

var isTouch = event.type.indexOf('touch') >= 0 ? true : false;

var x = isTouch ? event.touches[0].pageX : event.offsetX + event.target.offsetLeft;

var y = isTouch ? event.touches[0].pageY : event.offsetY + event.target.offsetTop;

return { x: x, y: y };

}

function save() {

var data = canvas.toDataURL("image/png"); //把canvas畫板上的內容轉成指定格式圖片數據，并進行Base64編碼

var img = new Image();

img.src = data;

$(document.body).append(img);

}

function clean() {

board.clearRect(0, 0, canvas.width, canvas.height);

}

canvas.onmousedown = beginDraw;

canvas.onmousemove = drawing;

canvas.onmouseup = endDraw;

canvas.addEventListener('touchstart', beginDraw, false);

canvas.addEventListener('touchmove', drawing, false);

canvas.addEventListener('touchend', endDraw, false);

總結

以上是生活随笔為你收集整理的html5手机签名,html5手写签名的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。