meidu2021/daju/WebRoot/webpage/cn/com/lzt/sign/approve/signature.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/context/mytags.jsp" %>
<t:base type="jquery,DatePicker"></t:base>
<div class="easyui-layout" fit="true">
    <div align="center">
        <canvas id="myCanvas" width="900px" height="300px" style="border:10px solid #90939964"></canvas>
        <div class="control-ops control">
            Line width : <select id="selWidth" onchange="aaa()">
            <option value="1">1</option>
            <option value="3">3</option>
            <option value="5" selected="selected">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>
        </div>
    </div>
</div>
<script type="text/javascript">
    var mousePressed = false;
    var lastX, lastY;
    var ctx = document.getElementById('myCanvas').getContext("2d");
    var c = document.getElementById("myCanvas");

    var control = document.getElementsByClassName("control")[0];

    window.onload = function () {
        InitThis();
    }

    function saveImageInfo() {
        var image = c.toDataURL("image/png");
        return image;
    }


    var selected1 = 5, 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) {
            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) {
            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) {
            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) {
                //只有PC端才有这个问题
                if (event.pageX - this.offsetLeft > 10 && event.pageX - this.offsetLeft < 910 && event.pageY - this.offsetTop > 10 && event.pageY - this.offsetTop < 310) {
                    Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, true);
                } else {
                    mousePressed = false;
                }
            }
        };

        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 - 10, lastY - 10);
            ctx.lineTo(x - 10, y - 10);
            ctx.closePath();
            ctx.stroke();
        }
        lastX = x;
        lastY = y;
    }

    function clearArea() {
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    }
</script>
<style>

    .saveimg {
        text-align: center;
    }

    .saveimgs span {
        display: inline-block;
        margin-top: 5px;
    }
</style>