canvas电子签证

作者: sunflower_07 | 来源:发表于2022-04-01 11:33 被阅读0次

canvas电子签证
那些年，我走过的办理签证的坑，请你绕过！
韩国电子医疗观光签证这么强,费用会不会过高?
泰国自启用电子签证
最详细的土耳其热气球旅行攻略
马来西亚护照都免签哪些国家？
上班族假期去哪儿之漫游马来西亚
canvas 实现电子签名（兼容横竖屏切换）、html2canv
伊斯坦布尔旅游攻略
伊斯坦布尔旅游攻略

<!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