手寫簽名

黑白兩客發表於2020-09-27
<!DOCTYPE html>
<!-- saved from url=(0056)http://hao2013.cn/canvas-special-master/brush/index.html -->
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>簽名板(支援移動端)</title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		.canvas {
			/*width: 100%;*/
			display: block;
			border: 1px solid red;
		}

		#clear,
		#clear1,
		#save {
			margin: 0 auto;
			display: inline-block;
			padding: 5px 10px;
			width: 50px;
			height: 40px;
			line-height: 40px;
			border: 1px solid #C8C7CC;
			background: #cccccc;
			border-radius: 10px;
			text-align: center;
			margin: 20px auto;
			cursor: pointer;
		}
	</style>
	<body data-ext-version="1.4.2">
		<canvas id="canvas" width="600" height="600" style="background: #CCCCCC;">
			您的瀏覽器不支援canvas技術,請升級瀏覽器!
		</canvas>
		<div style="text-align: center">
			<span id="clear">清空</span>
			<span id="save">儲存</span>
		</div>
	</body>
	<script type="text/javascript">
		function WriteFont(id, options) {
			var self = this;
			this.canvas = document.getElementById(id);
			var obj = {
				canvas: this.canvas,
				context: this.canvas.getContext("2d"),
				isWrite: false, //是否開始
				lastWriteTime: -1,
				lastWriteSpeed: 0,
				lastWriteWidth: 0,
				canvasWidth: 600, //canvas寬高
				canvasHeight: 600,
				isShowBorder: true, //是否顯示網格
				bgColor: '#ccc', //背景色
				borderWidth: 2, // 網格線寬度
				borderColor: "#fff", //網格顏色
				lastPoint: {}, //
				writeWidth: 2, //基礎軌跡寬度
				maxWriteWidth: 30, // 寫字模式最大線寬
				minWriteWidth: 1, // 寫字模式最小線寬
				writeColor: '#000', // 軌跡顏色
				isWriteName: false //簽名模式
			}

			for (var name in options) {
				obj[name] = options[name];
			}

			/**
			 * 軌跡寬度
			 */
			this.setLineWidth = function() {
				var nowTime = new Date().getTime();
				var diffTime = nowTime - obj.lastWriteTime;
				obj.lastWriteTime = nowTime;
				var returnNum = obj.minWriteWidth + (obj.maxWriteWidth - obj.minWriteWidth) * diffTime / 30;
				if (returnNum < obj.minWriteWidth) {
					returnNum = obj.minWriteWidth;
				} else if (returnNum > obj.maxWriteWidth) {
					returnNum = obj.maxWriteWidth;
				}

				returnNum = returnNum.toFixed(2);
				//寫字模式和簽名模式
				if (obj.isWriteName) {
					obj.context.lineWidth = obj.writeWidth;
				} else {
					obj.context.lineWidth = obj.lastWriteWidth = obj.lastWriteWidth / 4 * 3 + returnNum / 4;
				}
			}

			/**
			 * 繪製軌跡
			 */
			this.writing = function(point) {
				obj.context.beginPath();
				obj.context.moveTo(obj.lastPoint.x, obj.lastPoint.y);
				obj.context.lineTo(point.x, point.y);
				self.setLineWidth();
				obj.context.stroke();
				obj.lastPoint = point;
				obj.context.closePath();
			}

			/**
			 * 軌跡樣式
			 */
			this.writeContextStyle = function() {
				obj.context.beginPath();
				obj.context.strokeStyle = obj.writeColor;
				obj.context.lineCap = 'round';
				obj.context.lineJoin = "round";
			}

			/**
			 * 寫開始
			 */
			this.writeBegin = function(point) {
				obj.isWrite = true;
				obj.lastWriteTime = new Date().getTime();
				obj.lastPoint = point;
				self.writeContextStyle();
			}

			/**
			 * 寫結束
			 */
			this.writeEnd = function() {
				obj.isWrite = false;
			}

			/**
			 * 清空畫板
			 */
			this.canvasClear = function() {
				obj.context.save();
				obj.context.strokeStyle = '#fff';
				obj.context.clearRect(0, 0, obj.canvasWidth, obj.canvasHeight);
				if (obj.isShowBorder && !obj.isWriteName) {
					obj.context.beginPath();
					var size = obj.borderWidth / 2;
					//畫外面的框
					obj.context.moveTo(size, size);
					obj.context.lineTo(obj.canvasWidth - size, size);
					obj.context.lineTo(obj.canvasWidth - size, obj.canvasHeight - size);
					obj.context.lineTo(size, obj.canvasHeight - size);
					obj.context.closePath();
					obj.context.lineWidth = obj.borderWidth;
					obj.context.strokeStyle = obj.borderColor;
					obj.context.stroke();
					//畫裡面的框
					obj.context.moveTo(0, 0);
					obj.context.lineTo(obj.canvasWidth, obj.canvasHeight);
					obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);
					obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);
					obj.context.lineTo(0, obj.canvasHeight / 2);
					obj.context.lineTo(0, obj.canvasHeight);
					obj.context.lineTo(obj.canvasWidth, 0);
					obj.context.lineTo(obj.canvasWidth / 2, 0);
					obj.context.lineTo(obj.canvasWidth / 2, obj.canvasHeight);
					obj.context.stroke();

				}
				obj.context.restore();
			}

			/**
			 * 儲存圖片 格式base64
			 */
			this.saveAsImg = function() {
				var image = new Image();
				image.src = this.canvas.toDataURL("image/png");
				if (image.src == this.emptyCanvas) {
					alert('請先書寫')
				} else {
					console.log('提交的內容===>', image.src)
				}
			};

			/**
			 * 初始化畫板
			 */
			this.canvasInit = function() {
				this.canvas.width = obj.canvasWidth;
				this.canvas.height = obj.canvasHeight;
				this.emptyCanvas = this.canvas.toDataURL("image/png");
			}

			/**======================事件繫結===========================**/

			this.canvas.addEventListener('mousedown', function(e) {
				var point = {
					x: e.offsetX || e.clientX,
					y: e.offsetY || e.clientY
				};
				self.writeBegin(point);
			});

			this.canvas.addEventListener('mouseup', function(e) {
				var point = {
					x: e.offsetX,
					y: e.offsetY
				};
				self.writeEnd(point);
			});

			this.canvas.addEventListener('mouseleave', function(e) {
				var point = {
					x: e.offsetX,
					y: e.offsetY
				};
				self.writeEnd(point);
			});

			this.canvas.addEventListener('mousemove', function(e) {
				if (obj.isWrite) {
					var point = {
						x: e.offsetX,
						y: e.offsetY
					};

					self.writing(point);
				}
			});

			//移動端
			this.canvas.addEventListener('touchstart', function(e) {
				var touch = e.targetTouches[0];
				var point = {
					x: touch.pageX || touch.clientX,
					y: touch.pageY || touch.clientY
				};
				self.writeBegin(point);
			});
			this.canvas.addEventListener('touchend', function(e) {
				var touch = e.changedTouches[0];
				var point = {
					x: touch.pageX,
					y: touch.pageY
				};
				self.writeEnd(point);
			});
			this.canvas.addEventListener('touchmove', function(e) {
				var touch = e.targetTouches[0];
				var point = {
					x: touch.pageX,
					y: touch.pageY
				};
				self.writeEnd(point);
			});
			this.canvas.addEventListener('touchmove', function(e) {
				var touch = e.targetTouches[0];
				var point = {
					x: touch.pageX,
					y: touch.pageY
				};
				self.writing(point);
			});

			this.canvasInit();
			this.canvasClear();

			this.option = obj;
			obj.control = {
				clearCanvas: self.canvasClear
			};
		}

		/**
		 * 初始化呼叫
		 * 設定引數
		 */
		var writeCanvas = new WriteFont('canvas', {
			borderWidth: 10,
			writeWidth: 3,
			borderColor: '#ff6666',
			isWriteName: true //簽名模式
		});

		document.getElementById('clear').onclick = function() {
			writeCanvas.option.control.clearCanvas();
		};

		document.getElementById('save').onclick = function() {
			writeCanvas.saveAsImg()
		};
	</script>
</html>

相關文章