There is often a scene of signature in bank business or electronic contract signing, I just want to see how to realize it, but I am not familiar with canvas, so I would like to record this writing method here

Code configuration

<template> <! <div class="page sign-page"> <div class="content"> <div class="sign-wrap" id="signWrap"> <canvas id="myCanvas" width="100%" height="100%"></canvas> </div> </div> <div class="con-btn"> <span class="staging-btn size14" <span > <span class="submit- BTN size14" @click="saveSign()"> Confirm signature </span> </div> <div class="img"> <img class="myimg" > </div> </div> </template> <script> export default { name: "signature", data() { return { image: "", mousePressed: false, c: "", ctx: "", lastX: 0, lastY: 0, $img:'' }; }, mounted() { this.$nextTick(function () { this.$img = document.getElementsByClassName('myimg')[0] }); this.image = ""; this.mousePressed = false; // var lastX, lastY; this.ctx = document.getElementById("myCanvas").getContext("2d"); this.c = document.getElementById("myCanvas"); var signWrap = document.getElementById("signWrap"); this.c.width = signWrap.clientWidth; // Set width this.c.eight = signWrap. ClientHeight; // Set the height // listen for events such as TouchStart, TouchMove, and TouchEnd this.initThis (); }, methods: {InitThis() {var that = this; this.c.addEventListener( "touchstart", function (event) { if (event.targetTouches.length == 1) { event.preventDefault(); Var touch = event.targettouches [0]; this.mousePressed = true; that.Draw( touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop, false ); } }, false ); this.c.addEventListener( "touchmove", function (event) { if (event.targetTouches.length == 1) { event.preventDefault(); Var touch = event.targettouches [0]; if (this.mousePressed) { that.Draw( touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop, true ); } } }, false ); this.c.addEventListener( "touchend", function (event) { if (event.targetTouches.length == 1) { event.preventDefault(); // Prevent browser default events from dragging the screen while writing, important this.mousePressed = false; } }, false ); // mouse this.c.onmouseDown = function (event) {this.mousepressed = true; that.Draw( event.pageX - this.offsetLeft, event.pageY - this.offsetTop, false ); }; this.c.onmousemove = function (event) { if (this.mousePressed) { that.Draw( event.pageX - this.offsetLeft, event.pageY - this.offsetTop, true ); }}; this.c.onmouseup = function (event) { this.mousePressed = false; }; }, Draw(x, y, isDown) { if (isDown) { this.ctx.beginPath(); this.ctx.strokeStyle = "#000"; // this.ctx.lineWidth = 3; This.ctx. lineJoin = "round"; this.ctx.lineMax = 10; // Set the maximum brush width this.ctx.lineMin = 3; // Set the minimum brush width this.ctx.linePressure = 1.2; // Set the brush pressure this.ctx.smoothness = 30; This.ctx.moveto (this.lastx, this.lasty); this.ctx.lineTo(x, y); this.ctx.closePath(); this.ctx.stroke(); } this.lastX = x; this.lastY = y; }, // Clear the artboard clearArea() {this.ctx.setTransform(1, 0, 0, 1, 0, 0); this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); this.$img.src = "https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=0522dd202e2eb938ec3872f6e052a903/21a446230 9f79052c9e799ff0df3d7ca7acbd573.jpg"; }, // Submit the signature saveSign() {this.checkempty (); // Call form non-empty validation}, checkEmpty() {var c = document.getelementById ("myCanvas"); If (this.iscanvasBlank (c)) {alert(" Please reconfirm after signing in the signature area "); return; } else { var image = this.c.toDataURL("image/png"); // Get the generated signature base64 URL // console.log(image); Base64 url this.$img. SRC = image; Var blank = document.createElement("canvas"); var blank = document.createElement("canvas"); // The system gets an empty canvas object blank. Width = canvas.width; blank.height = canvas.height; return canvas.toDataURL() == blank.toDataURL(); },},}; </script> <style lang="less" scoped> .page { width: 100%; height: 100%; .content { width: 100%; height: 40%; background: url('https://www.pexels.com/zh-cn/@padrinan') no-repeat center center; background-size: contain; .sign-wrap { width: 100%; height: 100%; } } .con-btn { width: 100%; height: 10%; display: flex; align-content: center; justify-content: space-between; Opacity: 0.75; span { width: 50%; The font - size: 0.14 rem; // height: 1rem; display: flex; align-items: center; justify-content: center; } .staging-btn { color: #4154ff; background: #ccc; } .submit-btn { color: #fff; background: #4154ff; } } .img { width: 100%; height: 40%; img { width: 100%; height: 100%; } } } </style>Copy the code