[转]H5 canvas手写签名

作者：王永存
来源：CSDN
原文：https://blog.csdn.net/wang1006008051/article/details/80841581
版权声明：本文为博主原创文章，转载请附上博文链接！
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes"/>
    <title>手写签名</title>
    <style type="text/css">
        html,body{
            margin: 0;
            padding: 0;
        }
        .saveimg{
            text-align: center;
        }
        .saveimgs span{
            display: inline-block;
            margin-top:5px;
        }
    </style>
</head>
<body>
 
<div align="center">
    <canvas id="myCanvas" width="500" height="300" style="border:1px solid #6699cc"></canvas>
    <div class="control-ops control">
        <button type="button" class="btn btn-primary" onclick="javascript:clearArea();return false;">清空画板</button>
        Line width : <select id="selWidth" onchange="aaa()">
        <option value="1">1</option>
        <option value="3" selected="selected">3</option>
        <option value="5">5</option>
        <option value="7">7</option>
        <option value="9">9</option>
        <option value="11">11</option>
    </select>
        Color : <select id="selColor" onchange="aaa2()">
        <option value="black" selected="selected">black</option>
        <option value="blue">blue</option>
        <option value="red">red</option>
        <option value="green">green</option>
        <option value="yellow">yellow</option>
        <option value="gray">gray</option>
    </select>
        <button type="button" class="saveimg" onclick="javascript:saveImageInfo();return false;">保存</button>
    </div>
    <div class="saveimgs"></div>
</div>
 
</body>
 
<script type="text/javascript">
    var mousePressed = false;
    var lastX, lastY;
    var ctx = document.getElementById('myCanvas').getContext("2d");
    var c = document.getElementById("myCanvas");
    //      console.log(c)
    //      console.log(c2)
    var control = document.getElementsByClassName("control")[0];
    var saveimgs = document.getElementsByClassName("saveimgs")[0];
 
    window.onload = function(){
        InitThis();
    }
 
    function saveImageInfo(){
        var image = c.toDataURL("image/png");
        var ctximg = document.createElement("span");
        ctximg.innerHTML = "<img src='"+image+"' alt='from canvas'/>";
        if(saveimgs.getElementsByTagName('span').length >= 1){
            var span_old = saveimgs.getElementsByTagName("span")[0];
            saveimgs.replaceChild(ctximg,span_old)
        }
        else{
            saveimgs.appendChild(ctximg);
        }
//          console.log(image)
    }
 
 
    var selected1,selected2;
    function aaa(){
        var sel = document.getElementById('selWidth');
        var value = sel.selectedIndex;
        return selected1 = sel[value].value;
    }
    function aaa2(){
        var sel2 = document.getElementById('selColor');
        var value = sel2.selectedIndex;
        return selected2 = sel2[value].value;
    }
 
    function InitThis() {
//          触摸屏
        c.addEventListener('touchstart', function (event) {
            console.log(1)
            if (event.targetTouches.length == 1) {
                event.preventDefault();// 阻止浏览器默认事件，重要
                var touch = event.targetTouches[0];
                mousePressed = true;
                Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop, false);
            }
 
        },false);
 
        c.addEventListener('touchmove', function (event) {
            console.log(2)
            if (event.targetTouches.length == 1) {
                event.preventDefault();// 阻止浏览器默认事件，重要
                var touch = event.targetTouches[0];
                if (mousePressed) {
                    Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop, true);
                }
            }
 
        },false);
 
        c.addEventListener('touchend', function (event) {
            console.log(3)
            if (event.targetTouches.length == 1) {
                event.preventDefault();// 阻止浏览器默认事件，防止手写的时候拖动屏幕，重要
//                  var touch = event.targetTouches[0];
                mousePressed = false;
            }
        },false);
        /*c.addEventListener('touchcancel', function (event) {
            console.log(4)
            mousePressed = false;
        },false);*/
 
 
 
//         鼠标
        c.onmousedown = function (event) {
            mousePressed = true;
            Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, false);
        };
 
        c.onmousemove = function (event) {
            if (mousePressed) {
                Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, true);
            }
        };
 
        c.onmouseup = function (event) {
            mousePressed = false;
        };
    }
 
    function Draw(x, y, isDown) {
        if (isDown) {
            ctx.beginPath();
            ctx.strokeStyle = selected2;
            ctx.lineWidth = selected1;
            ctx.lineJoin = "round";
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(x, y);
            ctx.closePath();
            ctx.stroke();
        }
        lastX = x; lastY = y;
    }
 
    function clearArea() {
        // Use the identity matrix while clearing the canvas
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 
        // 清除签名图片
        if(saveimgs.getElementsByTagName('span').length >= 1){
            var clearImg = saveimgs.getElementsByTagName('span')[0];
            saveimgs.removeChild(clearImg);
        }
 
    }
</script>
 
</html>