移动端canvas签名画板

canvas.gif

首先创建一块画布
一个用来显示触屏区域坐标的p标签
清空,生成图片两个按钮
img显示生成的图

        <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样式

        *{margin: 0;padding: 0;}
        #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;
        }

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

解决方法:

image.png

如图,我们需要的值 = 触摸点获取到的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")
            }