canvas 实现简单的画板功能添加手机端效果 1.01

在上次的基础上,加了一些代码,手机端可操作

访问网址:https://chandler712.github.io/Item/

<!-- 简单版画板 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单版画板</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <style>
        body,div,canvas,h5,input,ul,li,p,button{
            margin: 0px;
            padding: 0px;
            position: relative;
            
        }
        #mycanvas{
            
           margin: 5px;
       }
        #content{
            margin: 5px auto;
            width: 700px;
            height: 510px;
            border: 1px solid gray;
            
        }
        #canvas_selector{
            position: absolute;
            margin-left: 505px;
            margin-top: -512px;
            
            height: 500px;
            width: 190px;
            border:1px solid black;
        }
        .title{
            text-align: center;
            margin-bottom: 10px;
        }
       
        ul li{
            
            list-style-type: none;
            margin: 10px 30px 10px 20px;
            display: block;
            float: left;
            width: 40px;
            height: 20px;
            background:greenyellow;
            cursor: pointer;
            border: 1px solid gray;
        }
     
        #canvas_color,#canvas_brush,#canvas_control,#canvasImage{
            
            margin:50px 0 50px 0;
        }
       
        #canvas_brush{
           
            height: 80px;
            margin:10px 10px 0px 20px;

            background:greenyellow;
            text-align:center;
            
        } 
        #lineT{
            width: 150px;
            height: 30px;
            background:bisque;
        }
        #canvas_control{
            margin:10px 10px 20px 30px;
            text-align:center;
        }
        
        #canvasImage{
            text-align: center;
           
        }
        #imgDiv{
            margin: 0 auto;
        }
        #line{
            width: 40px;
            height: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="content">
        <canvas id="mycanvas" width="500" height="500" style="border: 1px solid red;"></canvas>
        <div id="canvas_selector">
            
            <div id="canvas_color">
                
                <h5 class="title">颜色<input type="color" name="color" id="changeColor" /></h5>
            </div>
            <div id="canvas_brush">
                <h5 class="title">画笔大小</h5>
                <input type="range" id="lineT" min="1" max="100" value="2">
            </div>
            <div id="canvas_control">
                <h5 class="title">操作</h5>
                <span><button style="background:greenyellow" id="prev">上一步</button></span>
                
                <span><button style="background:greenyellow" id="cloth">橡皮擦</button></span>
                <span><button style="background:#ffc200" id="clear">清除</button></span>
            </div>
            <div id="canvasImage">
                <button id="createImg">生成图像</button>
            </div>
        </div>
        
    </div>
    <div id="imgDiv"></div>
    
</body>
</html>
<script>
    var canvas=document.getElementById("mycanvas");
    var ctx=canvas.getContext("2d");//创建画布对象
    var bool=false;
    var left=$("#mycanvas").offset().left;//获取画布的left值
    console.log("left",left);
    var top=$("#mycanvas").offset().top;//获取画布的top值
    console.log("top",top);
    var canvasW=$("#mycanvas").width();//获取画布的宽度
    console.log("canvasW",canvasW);
    var canvasH=$("#mycanvas").height();//获取画布的高度
    console.log("canvasH",canvasH);
    var img = []; //用于存放画布图片截图的数组
    var imgDiv=document.getElementById("imgDiv");
    var content=document.getElementById("content")
    
    var color="#000";
    
    ctx.lineCap="round";// 设置线条的结束端点样式    
    ctx.lineJion="round";//设置两条线相交时,所创建的拐角类型  
     
  
    
    //鼠标点击设置画布起点
     $("#mycanvas").mousedown(function(e){
        bool=true;
        console.log("mousedown",bool);
        ctx.beginPath();//起始/重置一条路径
        ctx.moveTo(e.clientX-left,e.clientY-top); //把路径移动到画布中的指定点,不创建线条
        var pic=ctx.getImageData(0,0,canvasW,canvasH);//获取当前画布的图像
        img.push(pic);//将当前图像存入数组
    });
    //当bool=ture时鼠标移动画线
     $("#mycanvas").mousemove(function(e){
       console.log("mousemove",bool);
        if(bool){ //通过bool值控制画线的连续性,如果bool=true,画线
            console.log("if(bool)",bool);
            ctx.lineTo(e.clientX-left,e.clientY-10);//添加一个新点,在画布中创建从该点到最后指定点的线条
            ctx.stroke();//画线
        }
    });
    //鼠标移出画布或者抬起时,退出当前画线,并新建画线,实现画线断续
     $("#mycanvas").mouseout(function(e){
        ctx.closePath();//当鼠标移出画布区域时,创建从当前点回到起始点的路径
        bool=false;
        console.log("mouseout",bool);
    }); 
    $("#mycanvas").mouseup(function(e){
        ctx.closePath();//当鼠标抬起时,创建从当前点回到起始点的路径
        bool=false;
        console.log("mouseup",bool);
    }); 


    //清除画布
    $("#clear").click(function(){
        //alert("Are you sure clear the canvas?");
        ctx.clearRect(0,0,canvasW, canvasH);//创建矩形清空
    });
    //擦除画布
    $("#cloth").click(function(){
        ctx.strokeStyle="#fff";//利用画线为白色实现橡皮擦功能
    });
    //上一步
    $("#prev").click(function(){
        if(img.length>=0){
            console.log("img.length",img.length);
            var newImgLength=img.length;
            console.log("newImgLength",newImgLength);
            ctx.putImageData(img.pop(),0,0);
            
         
        }
    });
    //改变颜色
    $("#changeColor").change(function(){
        ctx.strokeStyle=this.value;//改变颜色
    });
    //改变画笔大小
    $("#lineT").change(function(){
        ctx.lineWidth=this.value;
    });
    
    


     
        
    //生成图片
    $("#createImg").click(function(){
        var url=canvas.toDataURL(‘image/png‘);
        var newImg=new Image();//创建一个Image对象
        newImg.src=url;
        imgDiv.appendChild(newImg);
        imgDiv.style.width="500px";
        imgDiv.style.height="500px";
        imgDiv.style.background="#ccc";
        
    });


 //手机端功能实现
    //鼠标点击设置画布起点
    canvas.ontouchstart=function(a){
        bool=true;
        var x=a.touches[0].clientX;
        var y=a.touches[0].clientY;
        console.log(x,y);
        ctx.beginPath();//起始/重置一条路径
        ctx.moveTo(x,y);
        var pic=ctx.getImageData(0,0,canvasW,canvasH);//获取当前画布的图像
        img.push(pic);//将当前图像存入数组
    };
    canvas.ontouchmove=function(a){
       console.log("move",bool);
        var x=a.touches[0].clientX;
        var y=a.touches[0].clientY;
        if(bool){ //通过bool值控制画线的连续性,如果bool=true,画线
            console.log("if(bool2)",bool);
        
            ctx.lineTo(x-left,y);//添加一个新点,在画布中创建从该点到最后指定点的线条
            ctx.stroke();//画线
           
        }
    };
   
 

        
    
</script>

  

canvas 实现简单的画板功能添加手机端效果 1.01

上一篇:易学app开发----5


下一篇:react 移动端 兼容性问题和一些小细节