canvas电子签证
2022-04-01 本文已影响0人
sunflower_07
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>签证</title>
<style type="text/css">
* {margin: 0;padding: 0;}
.music-play {margin: 100px;}
.music-play canvas {border: 1px solid #ccc;}
.btns {text-align: center;}
.btn {width: 100px;display: inline-block;margin-right: 20px;background-color: red;
height: 50px;line-height: 50px;color: #fff;}
</style>
</head>
<body>
<div class="music-play">
<canvas width="500" height="500"></canvas>
</div>
<div class="btns">
<div class="btn" onclick="reset()">重置</div>
<div class="btn" onclick="down()">下载</div>
</div>
</body>
<script type="text/javascript">
window.onload = function() {
const oc = document.querySelector('canvas');
oc.width = document.documentElement.offsetWidth * 0.8;
if (oc.getContext('2d')) {
const ctx = oc.getContext('2d');
ctx.save();
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0, 0, oc.width, oc.height);
ctx.restore();
ctx.strokeStyle = "#ff0000";
ctx.lineWidth = 3;
oc.onmousedown = function(e) {
ctx.beginPath();
ctx.moveTo(e.clientX - oc.offsetLeft, e.clientY - oc.offsetTop);
oc.onmousemove = function(e) {
ctx.lineTo(e.clientX - oc.offsetLeft, e.clientY - oc.offsetTop);
ctx.stroke();
};
oc.onmouseup = function(e) {
oc.onmousemove = null;
}
}
}
}
function reset() {
const oc = document.querySelector('canvas');
if (oc.getContext('2d')) {
const ctx = oc.getContext('2d');
ctx.clearRect(0, 0, oc.width, oc.height);
}
}
function down() {
const oc = document.querySelector('canvas');
var a = document.createElement('a');
a.download = '电子签名';
a.href = oc.toDataURL('image/jpeg');
a.click();
}
</script>
</html>
image.png
