画板（适用于手机PC端）

Posted 2020-09-03 灰灰小菜鸟

html代码

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>

<!-- 定义画板的区域 -->
<canvas id="myCanvas" style="background-color: black; border: 1px solid #BFBFBF;"></canvas><br/>

<!-- 清空画板的按钮 -->
<button onclick="clean();" style="height: 3em;width: 5em;">清 空</button>

<!-- 根据画板里的内容，生成图片 -->
<button onclick="savePic();" style="height: 3em;width: 6em;">生成图片</button><br/>

<!-- 生成的图片存放的img标签 -->
<img id="img" alt="请签名"  width="100px" />

<script type="text/javascript">

    var canvas;  //定义一个全局的 canvas
    var board;   //定义一个画板的 全局变量
    var img;     //图片
    var mousePress = false;  //鼠标按压全局变量 , 默认不按压
    var last = null;   //最后的按压点全局变量  ,默认没有最后按压坐标

    
    //页面加载后进行的操作
    $(function(){
    
        canvas = document.getElementById(‘myCanvas‘);  //指定canvas区域
        img= document.getElementById(‘img‘);  //获取图片

        canvas.height = 300;  //定义 canvas 的高度
        canvas.width = 500;  //定义 canvas 的宽度

        board = canvas.getContext(‘2d‘);  //创建画板


        board.lineWidth = 2;   //画板的书写字体宽度
        board.strokeStyle = "#F5270B";  //画板的书写的字体颜色

        board.stroke();
        

        canvas.onmousedown = beginDraw;  
        canvas.onmousemove = drawing;
        canvas.onmouseup = endDraw;
        
        canvas.addEventListener(‘touchstart‘,beginDraw,false);
        canvas.addEventListener(‘touchmove‘,drawing,false);
        canvas.addEventListener(‘touchend‘,endDraw,false);
    
    });
    
    /**
     *   开始画画，将鼠标按压全局变量设为true
     */
    function beginDraw(){
        mousePress = true;
    }

    /**
     *  画画
     */
    function drawing(event){    

        //算出canvs距离顶部的坐标，如果画板的顶部不在页面的最上边，会非常有用
        var canvs_top = $(‘#myCanvas‘).offset().top;  
        event.preventDefault();
        
        //如果没有按压，返回
        if(!mousePress)return;
        
        //获取点触点的坐标
        var xy = pos(event);
        

        //如果最后的按压点全局变量 不为空，证明手或鼠标没有松开过，从最后按压点到现在按压点划线
        if(last!=null){
            board.beginPath();
            board.moveTo(last.x,last.y-canvs_top);
            board.lineTo(xy.x,xy.y - canvs_top);
            
            board.lineWidth = 2;
            board.strokeStyle = "#F5270B";
            
            board.stroke();
        }
        
        //将最后的按压点全局变量设置为当前的按压点坐标
        last = xy;
    }

    /**
     * 结束画画
     */
     function endDraw(event){
         mousePress = false;
         event.preventDefault();
         last = null;
    }
    
    /**
     * 生成的图片存放的img标签
     */
    function savePic(){
        var dataUrl = canvas.toDataURL();
        img.src = dataUrl;
    }

    /**
     * 清空画板
     */
    function clean(){
        board.clearRect(0,0,canvas.width,canvas.height);
    }
    
    /**
     * 获取按压点的坐标
     */
     function pos(event){
        var x,y;
        if(isTouch(event)){
            x = event.touches[0].pageX;
            y = event.touches[0].pageY;
        }else{
            x = event.offsetX+event.target.offsetLeft;
            y = event.offsetY+event.target.offsetTop;
        }
        // log(‘x=‘+x+‘ y=‘+y);
        return {x:x,y:y};
    }

    /**
     * 输入坐标变化
     */
    function log(msg){
        var log = document.getElementById(‘log‘);
        var val = log.value;
        log.value = msg+‘n‘+val; 
    }

    
    function isTouch(event){
        var type = event.type;
        if(type.indexOf(‘touch‘)>=0){
            return true;
        }else{
            return false;
        }
    }    
</script>