<!DOCTYPE html>
<html>
<head >
<meta charset="utf-8">
<title></title>
<style type="text/css">
#canvas {
border: thin solid blue;
}
</style>
<script src="qm/jquery.min.js"></script>
</head>
<body >
<button type="button" οnclick="overwrite()">重寫</button>
<button type="button" οnclick="submit()">送出簽名</button>
<canvas id="canvas" width="600" height="600"></canvas>
<script type="text/javascript">
var context;
window.onload = function () {
var device =
/android|iphone|ipad|ipod|webos|iemobile|opear mini|linux/i.test(navigator.userAgent.toLowerCase());
var startEvtName = device ? "touchstart" : "mousedown";
var moveEvtName = device ? "touchmove" : "mousemove";
var endEvtName = device ? "touchend" : "mouseup";
var canvas = document.getElementById("canvas");
canvas.height = window.screen.height - 500; //canvas的寬高必須在js在設定，在css中設定大小是縮放效果
canvas.width = window.screen.width;
context = canvas.getContext("2d");
console.log(context);
var isdown = false;
canvas.addEventListener(moveEvtName, function (e) {
if (!isdown) return;
var location;
if (device) {
location = getLocation(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
} else {
location = getLocation(e.clientX, e.clientY);
}
points[points.length] = location;
context.beginPath();
context.moveTo(downlocation.x, downlocation.y);
context.lineTo(location.x, location.y);
context.stroke();
context.closePath();
downlocation = location;
}, false);
var downlocation;
canvas.addEventListener(startEvtName, function (e) {
isdown = true;
if (device) {
downlocation = getLocation(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
} else {
downlocation = getLocation(e.clientX, e.clientY);
}
console.log(downlocation)
}, false);
canvas.addEventListener(endEvtName, function (e) {
isdown = false;
points[points.length] = { x: -1, y: -1 };
console.log(points);
}, false);
}
var points = [];
function submit() {
var ps = '';
for (var i = 0; i < points.length; i++) {
ps += points[i].x.toFixed(2) + ',' + points[i].y.toFixed(2) + ','
}
$.post('/Contract/UpLoadQM', 'PointList=' + ps, function (date) {
});
}
function overwrite() {
if (context) context.clearRect(0, 0, canvas.width, canvas.height);
points = [];
}
function getLocation(x, y) {
var bbox = canvas.getBoundingClientRect();
return {
x: (x - bbox.left) * (canvas.width / bbox.width),
y: (y - bbox.top) * (canvas.height / bbox.height)
};
}
</script>
</body>
</html>
![Linux經典案例：centos搭建NFS檔案共享服務[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)