js+画布实现在线签名

css

#myCanvas{
display: block;
margin: 100px auto;
border: 5px solid #00eed2;
border-radius: 10px;
}
#but{
text-align: center;
position: relative;
bottom: 72px;
}
.but1,.but2{
width: 100px;
height: 30px;
background-color: #00eed2;
border: none;
border-radius: 8px;
}
.but2{
margin-left: 200px;
}

html

<canvas id="myCanvas" width="700" height="400"></canvas>
<div id="but" >
        <button class="but1" οnclick="fa()">确认</button>
        <button class="but2" οnclick=" fn()">重置</button>
</div>

js

var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
var cz = myCanvas.querySelector("but2")
ctx.lineWidth = 2;
ctx.lineJoin = "round";
ctx.lineCap = "round";

myCanvas.onmousedown = function (e){
var offsetTop = myCanvas.offsetTop;
var offsetLeft = myCanvas.offsetLeft;
ctx.beginPath();
ctx.moveTo(e.clientX - offsetLeft,e.clientY - offsetTop);
myCanvas.onmousemove = function (ev){
ctx.lineTo(ev.clientX - offsetLeft,ev.clientY - offsetTop);
ctx.stroke();

}
}
myCanvas.onmouseup = function (){
myCanvas.onmousemove = null;
ctx.closePath();
}
myCanvas.onmouseleave = function (){
myCanvas.onmousemove = null;
ctx.closePath();
}

function fa(){
myCanvas.toBlob(function (blob){
var url = URL.createObjectURL(blob);
var link = document.createElement("a");
link.href = url;
link.download = (Math.random())+"".replace("0.","img");
link.click();
URL.revokeObjectURL(url);

})
}
function fn(){
ctx.clearRect(
0,
0,
700,
400
)
}

效果