移动端Canvas画板签名（原生js）

转发自https://www.jianshu.com/p/e6d8351b6483

效果预览

首先创建画布

一个用来显示触屏区域

清空，生成图片两个按钮

img显示生成的图片

HTML部分

<canvas id="myCanvas" width="300" height="200"></canvas>
    <div id="operation">
        <p id="position"> </p>
        <button id="clearCanvas">清空</button>
        <button id="success">生成图片</button>
    </div>
    <img id="canvasImg" src="" alt="生成的图片" width="300" height="200">

CSS部分

#myCanvas{
    border:1px solid #333;
    display: block;
    margin: 0 auto;
}
#operation{
    width: 300px;
    margin: 10px auto;
}
#position{
    width: 100%;
    text-align: center;
    height: 30px;
}
#canvasImg{
    display: block;
    margin: 0 auto;
    border: 1px dotted #333;
}

重点JS部分

给画布添加touch触摸事件
用来获取
当前触摸的坐标点相对于画布的位置,
但在实现过程中发现touch坐标点一直是相对body的位置

解决方法:

如图,我们需要的值 = 触摸点获取到的x - canvas相对body的左边距

var start_x, start_y, move_x, move_y, end_x, end_y;
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");

        var t = document.getElementById('myCanvas').offsetTop;//canvas上边距
        var l = document.getElementById('myCanvas').offsetLeft;//canvas做边距
        //按下
        document.getElementById("myCanvas").addEventListener("touchstart", function (e) {
            start_x = e.touches[0].pageX - l;
            start_y = e.touches[0].pageY - t;
            //显示坐标
            document.getElementById('position').innerText = (`${start_x},${start_y}`);
        });
        //移动
        document.getElementById("myCanvas").addEventListener("touchmove", function (e) {
            move_x = e.touches[0].pageX - l;
            move_y = e.touches[0].pageY - t;
            //显示坐标
            document.getElementById('position').innerText = (`${move_x},${move_y}`);
        });
        //松开
        document.getElementById("myCanvas").addEventListener("touchend", function (e) {
            end_x = e.changedTouches[0].pageX - l;
            end_y = e.changedTouches[0].pageY - t;
            //显示坐标
            document.getElementById('position').innerText = (`${end_x},${end_y}`);
        });

接下来
按下时开始绘画,标记画笔起始点

document.getElementById("myCanvas").addEventListener("touchstart",function(e){ 
                start_x=e.touches[0].pageX-l;
                start_y=e.touches[0].pageY-t;
                //开始本次绘画  
                ctx.beginPath(); 
                //画笔起始点  
                ctx.moveTo(start_x, start_y); 
                //显示坐标
                document.getElementById('position').innerText=(`${start_x},${start_y}`);
            });

移动过程中根据鼠标路径绘画并渲染出来

document.getElementById("myCanvas").addEventListener("touchmove",function(e){   
                move_x=e.touches[0].pageX-l;
                move_y=e.touches[0].pageY-t;
                //根据鼠标路径绘画  
                ctx.lineTo(move_x, move_y); 
                //立即渲染  
                ctx.stroke(); 
                //显示坐标
                document.getElementById('position').innerText=(`${move_x},${move_y}`);
            });

松开时,创建从当前点到开始点的路径

document.getElementById("myCanvas").addEventListener("touchend",function(e){  
                end_x=e.changedTouches[0].pageX-l;
                end_y=e.changedTouches[0].pageY-t;
                //创建从当前点到开始点的路径
                ctx.closePath();
                //显示坐标
                document.getElementById('position').innerText=(`${end_x},${end_y}`);
            });

清空当前画布

清空当前画布clearRect(0,0,0,0)
前两个值代表起始点x,y
后两个代表终止点x,y

            document.getElementById('clearCanvas').onclick=function(){
                // 清空画布
                ctx.clearRect(0,0,300,200);
            }

生成图片canvas.toDataURL("image/png")

document.getElementById('success').onclick=function(){
                // canvas生成图片base64编码
                console.log(canvas.toDataURL("image/png"))
                //将生成的图片赋给img元素
                document.getElementById('canvasImg').src=canvas.toDataURL("image/png")
            }

本文转发自https://www.jianshu.com/p/e6d8351b6483

如有侵权，请联系删除