在pc端与移动端实现签字功能遇到的问题

一、在pc端使用

1.html

注意点：canvas跟其他标签一样，也可以通过css来定义样式。但这里需要注意的是：canvas的默认宽高为300px * 150px,在css中为canvas定义宽高，实际上把宽高为300px * 150px的画布进行了拉伸，如果在这样的情况下进行canvas绘图，你得到的图形可能就是变形的效果。所以，在canvas绘图时，应该在canvas标签里直接定义宽高。

//用于判断画布内容是否为空时做对比

//展示签字内容

2.js

        let canvas = document.getElementById('Canvas'); //获取画布ID

        let nullCanvas = document.getElementById('nullCanvas');//获取一个空画布用于下方保存画布内容时判断画布是否为空

        let saveEl = document.getElementById('saveCanvas');//获取保存按钮

        let clearEl = document.getElementById('clearCanvas');//获取清空按钮

        let context = canvas.getContext('2d');//获取画笔

        var ISmousedown = false; // 定义鼠标按下前为false

        // 监听鼠标按下

        canvas.onmousedown = (e) => {

            // 获取在canvas上的x，y轴坐标

            let x = e['layerX'];

            let y = e['layerY'];

            context.beginPath();  // 开始一条路径

            context.moveTo(x, y);  // 把路径移动到画布中的指定点

            ISmousedown = true;

        };

        // 监听鼠标移动

        canvas.onmousemove = (e) => {

            // 在鼠标按下时有效

            if (ISmousedown) {

                // 获取在canvas上的x，y轴坐标

                let x = e['layerX'];

                let y = e['layerY'];

                context.strokeStyle = "#000000";  // 设置线条的颜色

                context.lineWidth = 2;//设置线条的粗细

                context.lineCap = 'round'; // 线条末端添加圆形线帽，减少线条的生硬感

                context.lineJoin = 'round'; // 线条交汇时为原型边角

                // 利用阴影，消除锯齿

                context.shadowBlur = 1;

                context.shadowColor = '#000000';

                context.lineTo(x, y); // 添加一个新点，然后在画布中创建从该点到最后指定点的线条

                context.stroke(); // 在画布上绘制确切的路径

            }

        };

        // 监听鼠标抬起

        canvas.onmouseup = () => {

            context.closePath(); //结束本次绘画

            ISmousedown = false;

        };

        //监听清除按钮

        clearEl.onclick = () => {

            context.clearRect(0, 0, canvas.width, canvas.height);//清楚画布内容

        };

        //监听保存按钮

        saveEl.onclick = () => {

            let imgBase64 = canvas.toDataURL();//将画布内容转换为base64

            //判断画布内容是否为空

            if (imgBase64 == nullCanvas.toDataURL()) {

                toastr.error('请签名后再保存！');

                return;

            }

            this.option.signatureImg  = imgBase64;//将转换得到的base64赋值到相应的地方用标签展示

        };

二、在移动端使用

1.html

//用于判断画布内容是否为空时做对比

//展示签字内容

2.js

        let canvas = document.getElementById('Canvas');  //获取画布ID

        let nullCanvas = document.getElementById('nullCanvas'); //获取一个空画布用于下方保存画布内容时判断画布是否为空

         let saveEl = document.getElementById('saveCanvas');//获取保存按钮        

         let clearEl = document.getElementById('clearCanvas');//获取清空按钮        

         let context = canvas.getContext('2d');//获取画笔

        let rect = canvas.getBoundingClientRect();//查询画布在页面中的坐标

        //按下

        canvas.ontouchstart = (e) => {

            e.preventDefault();//页面有滚动条时限制页面在签字过程中滚动

            let start_x = e.touches[0].clientX - rect.left;//用鼠标x轴的位置减去画布左边距得到鼠标在画布中x轴的开始位置

            let start_y = e.touches[0].clientY - rect.top;//用鼠标y轴的位置减去画布上边距得到鼠标在画布中y轴的开始位置

            //开始本次绘画  

            context.beginPath();

            //画笔起始点  

            context.moveTo(start_x, start_y);

        };

        //移动

        canvas.ontouchmove = (e) => {

            let move_x = e.touches[0].clientX - rect.left;

            let move_y = e.touches[0].clientY - rect.top;

            context.strokeStyle = "#000000";//画线颜色

            context.lineWidth = 2;//画线粗细

            context.lineCap = 'round'; // 线条末端添加圆形线帽，减少线条的生硬感

            context.lineJoin = 'round'; // 线条交汇时为原型边角

            // 利用阴影，消除锯齿

            context.shadowBlur = 1;

            context.shadowColor = '#000000';

            //根据鼠标路径绘画  

            context.lineTo(move_x, move_y);

            //立即渲染  

            context.stroke();

        };

        //松开

        canvas.ontouchend = (e) => {

            //结束本次绘画

            context.closePath();

        };

        //清空画布内容

        clearEl.onclick = () => {

            context.clearRect(0, 0, canvas.width, canvas.height);

        };

        //保存画布内容

        saveEl.onclick = () => {

            let imgBase64 = canvas.toDataURL();

             //判断画布内容是否为空

            if (imgBase64 == nullCanvas.toDataURL()) {

                toastr.error('请签名后再保存！');

                return;

            }

             this.option.signatureImg  = imgBase64;//将转换得到的base64赋值到相应的地方用标签展示

        };

三、注意点

1.pc端的监听事件与移动端不同

2.移动端页面如果出现滚动条，需要让页面每次刷新都回到顶部，不然画出的线的位置会出现偏移