手机端H5手写电子签名绘画插件canvas_sign

来源:https://www.sucaihuo.com/js/5180.html 2021-01-17 15:13浏览(1068) 收藏

手机端H5手写电子签名绘画插件canvas_sign,兼容Web和手机移动端。
手机端H5手写电子签名绘画插件canvas_sign
分类:html5 > canvas 难易:高级
查看演示 下载资源 下载积分: 20 积分

js代码

<script type="text/javascript" src="js/flexible.debug.js"></script>
    <script type="text/javascript" src="js/zepto.js"></script>
    <script type="text/javascript" src="js/touch.js"></script>
    <script type="text/javascript" src="js/flexible.debug.js"></script>
    <script type="text/javascript" src="js/flexible_css.debug.js"></script>
    
    <script>
   	//获取页面尺寸  
    var canvasWidth = document.body.clientWidth;  
    var canvasHeight = canvasWidth;  
    //声明canvas  
    var canvas = document.getElementById('canvas');  
    var context = canvas.getContext('2d');  
    //设置canvas尺寸  
    canvas.width = canvasWidth * 0.98;  
    canvas.height = canvasHeight;  
    //画笔颜色  
    var strokeColor = "#000";  
    //鼠标  
    isMouseDown = false;  
    //上一次绘制的的坐标  
    var lastLoc = {x:0,y:0};  
    //初始记录事件  
    var lastTimestamp = 0;  
    //上一次线条宽度  
    var lastLineWidth = -1;  
    //var   
    var maxV = 10;  
    var minV = 0.1;  
    var maxLineWidth = 5;
    var minLineWidth = 1;  
      
    //点击色块切换画笔颜色  
    $(".colorBtn").on("click",function (e){  
        $(".colorBtn").removeClass('colorBtnBorder');  
        $(this).addClass("colorBtnBorder");  
        strokeColor = $(this).css("");  
    })
    //清除  
    $('#clear_btn').on('click',function (e){  
        context.clearRect( 0, 0, canvasWidth,canvasHeight);    
    });
    //保存画图
    $('#save_btn').on('click',function (e){
    	var image = canvasToImage(canvas);
    	console.log(image);
    });
    //获取canvas 坐标 x,y 分别代表相对window内的xy  
    function windowToCanvas(x,y){  
        //canvas提供的方法返回canvas 距 他外围包围盒子的距离left,top值  
        var bbox = canvas.getBoundingClientRect();  
        //返回的就是canvas 内的坐标值  
        return {x : Math.round(x - bbox.left),y : Math.round(y - bbox.top)}  
    }   
    //封装 事件  
    function beginStroke(point){  
        isMouseDown = true;  
        //第一次用户画的坐标初始值  
        lastLoc = windowToCanvas(point.x,point.y);  
        //获取首次点击鼠标 事件戳  
        lastTimestamp = new Date().getTime();  
    }  
    function endStroke(){  
        isMouseDown = false;  
    }  
    function moveStroke(point){  
        //开始绘制直线  
        var curLoc = windowToCanvas(point.x , point.y);  
        //路程  
        var s = calcDistance( curLoc, lastLoc);  
        //结束时间  
        var curTimestamp = new Date().getTime();  
        //时间差  
        var t = curTimestamp - lastTimestamp;  
        //绘制线条粗细  
        var lineWidth = calcLineWidth(t,s);  
      
        //绘制
        context.beginPath();  
        context.moveTo(lastLoc.x ,lastLoc.y);  
        context.lineTo(curLoc.x , curLoc.y);  
        context.strokeStyle = strokeColor;  
        context.lineWidth = lineWidth;  
        context.lineCap = "round";  
        context.lineJoin = "round";  
        context.stroke();     
        //给lastLoc赋值维护  
        lastLoc = curLoc;  
        //时间更新  
        lastTimestamp = curTimestamp;  
        lastLineWidth = lineWidth;    
    }  
    //pc鼠标事件  
    canvas.onmousedown = function(e){  
        e.preventDefault();  
        beginStroke({x:e.clientX , y:e.clientY});  
    }  
    canvas.onmouseup = function(e){  
        e.preventDefault();  
        endStroke();  
    }  
    canvas.onmouseout = function(e){  
        e.preventDefault();  
        endStroke();  
    }  
      
    canvas.onmousemove = function(e){  
        e.preventDefault();  
        if(isMouseDown){  
            moveStroke({x:e.clientX , y:e.clientY});      
        }  
    }  
    //移动端  
    canvas.addEventListener("touchstart",function(e){  
        e.preventDefault();  
        touch = e.touches[0]; //限制一根手指触碰屏幕  
        beginStroke({x:touch.pageX , y:touch.pageY});  
    });  
    canvas.addEventListener("touchend",function(e){
        e.preventDefault();  
        endStroke();  
    });  
    canvas.addEventListener("touchmove",function(e){  
        e.preventDefault();  
        if( isMouseDown){  
            touch = e.touches[0];  
            moveStroke({x: touch.pageX , y:touch.pageY});     
        }  
    });  
    //速度 = 路程 / 时间     用来计算书写速度来改变线条粗细  
    function calcDistance (loc1,loc2){  
        //返回 数的平方根  
        return Math.sqrt((loc1.x - loc2.x) * (loc1.x - loc2.x) + (loc1.y - loc2.y) * (loc1.y - loc2.y) );  
    }  
    //线条宽度  
    function calcLineWidth(t,s){  
        var v = s/t;  
        var resultLineWidth;  
        if(v <= minV){  
            resultLineWidth = maxLineWidth;  
        }else if(v >= maxV){  
            resultLineWidth = minLineWidth;  
        }else{  
            resultLineWidth = maxLineWidth - (v-minV)/(maxV-minV)*(maxLineWidth-minLineWidth);  
        }  
        if( lastLineWidth == -1){  
            return resultLineWidth;  
        }else{  
            return lastLineWidth*2/3 + resultLineWidth*1/3;  
        }  
    }
    // 将canvas转换成画布
    function canvasToImage(canvas){
    	var image = new Image();
    	image.src = canvas.toDataURL("image/png");
    	return image;
    }
    </script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2