画板(适用于手机PC端)

Posted 灰灰小菜鸟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了画板(适用于手机PC端)相关的知识,希望对你有一定的参考价值。

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>

 

以上是关于画板(适用于手机PC端)的主要内容,如果未能解决你的问题,请参考以下文章

原装正品适用于ps4游戏手柄pc电脑steam无线蓝牙震动手柄Switch pro使命召唤codm安卓ios手机RTAKO官方原

Css Pc端默认样式(适用于大部分项目开发)

移动端兼容问题注意事项

行业分析| 音视频呼叫邀请适用于多领域

嵌入式杂记--手机芯片与pc

Android的fastboot协议