GitHub链接-完整文档

最近做一个移动端项目, 有电子签名功能, 生产PNG格式上传服务器, 而且需要横屏签名, 这需要注意移动端的横屏后宽高的变化, 以下是JS核心部分, 完整文档请点击上面链接

    var canvas = document.getElementById("canvas");
    //动态设置宽高
    canvas.width = 400;
    canvas.height = 300;

    var content = canvas.getContext("2d");
    //设置画笔的样式    
    content.strokeStyle = "#000";
    content.lineWidth = 1;
    content.lineCap = 'round';
    content.lineJoin = 'round';
    content.shadowBlur = 1;
    content.shadowColor = '#000';

    content.beginPath();
    //点击
    canvas.addEventListener("touchstart", function(e) {
        content.beginPath();
        var touch = e.targetTouches[0];
        var x = touch.pageX - canvas.offsetLeft;
        var y = touch.pageY - canvas.offsetTop;
        content.moveTo(x, y);
    });
    //移动
    canvas.addEventListener("touchmove", function(event) {
        event.preventDefault();
        var touch = event.targetTouches[0];
        var x = touch.pageX - canvas.offsetLeft;
        var y = touch.pageY - canvas.offsetTop;
        content.lineTo(x, y);
        content.stroke();
    });
    //结束
    canvas.addEventListener("touchend", function(event) {
        content.closePath();
        $('.but2').attr('disabled', false);
    });
    //清除画布 .but1元素 点击事件
    document.querySelector(".but1").onclick = function() {
        content.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
    }

竖屏效果:

横屏效果: