H5 canvas制作画图

时间：2024-04-04 11:01:25


1概述

  随着前端技术的发展，canvas使用的越累越多，而且越来越多的H5技术被应用到实际开发中，尤其是js插件更是无处不用，今天主要是分享一下如何去使用canvas在H5界面中制一个超级简单的画图工具。

2效果图如下：

H5 canvas制作画图




3主要功能


支持选择画笔的颜色


支持选择画笔的线条粗细


 


4实现方式


 首先，我们需要一个容器，来将我的画图工具放入网页中




     <divclass="content">


 


然后我们要进行布局，布局详细如下，大体分为header、body、footer三部分：


<divclass="header">
    <divclass="left">
        <imgclass="choosePan"src="img/p1.png"/>
        <imgclass="pan"src="img/p2.gif"/>
        <imgclass="pan"src="img/p3.gif"/>
    </div>

    <divclass="right">
        <imgclass="chooseLineWidth"src="img/w3.png"/>
        <imgclass="lineWidth"src="img/w2.gif"/>
        <imgclass="lineWidth"src="img/w1.gif"/>
    </div>
</div>

<divclass="body">
    <canvasid="can"height="500"width="500"></canvas>
    <divclass="show">
        <divclass="divKeep"></div>
        <divclass="divKeep"></div>
        <divclass="divKeep"></div>
        <divclass="divKeep"></div>
        <divclass="divKeep"></div>
        <divclass="divKeep"></div>
        <inputclass="rightButton"type="button"value="清空"/>
    </div>

</div>
<divclass="footer">
    <inputtype="button"value="保存"/>
    <inputtype="button"value="清空"/>
</div>


 
接着就是添加方法和事件：
1.选择笔的方法：
//这里传参，0表示第一个笔，1表示第二个笔….
 <img class="choosePan" src="img/p1.png" onclick="choosePan(this,0)"/>

<img class="pan" src="img/p2.gif" onclick="choosePan(this,1)"/>

<img class="pan" src="img/p3.gif" onclick="choosePan(this,2)"/>
 
  //选择笔：


functionchoosePan(cell,index){
    pan=index;
//改变鼠标的样式（这里可以单独拿出一个方法，此处为了简略）
    switch(pan){
        case0:


             canvas.style.cursor="url('img/p1.png') 0 48,auto";
            break;
        case1:
            canvas.style.cursor="url('img/p2.gif') 0 48,auto";
            break;
        case2:
            canvas.style.cursor="url('img/p3.gif') 0 48,auto";
            break;
    }


 


//清除笔的颜色
    clearPan();


 


//选择笔的颜色
    cell.className="choosePan";
}


 
 


functionclearPan(){
    varpans=document.getElementsByClassName("choosePan");
    for(vari=0;i<pans.length;i++){
        pans[i].className="pan";
    }
}


 
 
 
2.选择线条的粗细：
参数同上
 <img class="chooseLineWidth" src="img/w3.png" onclick="chooseLineWidth(this,0)"/>

<img class="lineWidth" src="img/w2.gif" onclick="chooseLineWidth(this,1)"/>

<img class="lineWidth" src="img/w1.gif" onclick="chooseLineWidth(this,2)"/>
 


functionchooseLineWidth(cell,index){
    line=index;
    clearLineWidth();
    cell.className="chooseLineWidth";
}
functionclearLineWidth(){
    varpans=document.getElementsByClassName("chooseLineWidth");
    for(vari=0;i<pans.length;i++){
        pans[i].className="lineWidth";
    }
}


 

   3. 保存和清空画布：

  1. <inputtype="button"value="保存"onclick="keep()"/>
    <    inputtype="button"value="清空"onclick="clearCanvas()"/>

     


functionclearCanvas(){
    context.strokeStyle="white";
    context.clearRect(0,0,500,500);
}

functionkeep(){
    varurl=canvas.toDataURL();
    varmyKeep=document.getElementsByClassName("divKeep");
    varindex=-1;
    for(vari=0;i<myKeep.length;i++){
        if(!myKeep[i].innerHTML){
            index=i;
            break;
        }
    }
    if(index==-1){
        alert("缓存已满！请先清除缓存。");
    }else{
        varwidth=myKeep[index].offsetWidth;
        myKeep[index].innerHTML="<img src="+url+"width="+width+"\>";
    }
}


 


   4.清空右侧缓存区域：

  1. <inputclass="rightButton"type="button"value="清空"onclick="clearKeep()"/>

     


functionclearKeep(){
   varmyKeep=document.getElementsByClassName("divKeep");
    for(vari=0;i<myKeep.length;i++){
        myKeep[i].innerHTML="";
    }
}


 


     5．  开始画图：


onload=function(){
    canvas=document.getElementById("can");
    context=canvas.getContext("2d");
    varx;
    vary;
    varwrite=false;
    document.onmousemove=function(e){
        x= e.clientX;
        y= e.clientY-100;
    };

    canvas.onmousedown=function(e){
        varcolor="red";
        varlineWidth="1";
        switch(pan){
            case0:
                color="red";
                break;
            case1:
                color="green";
                break;
            case2:
                color="blue";
                break;
        }
        switch(line){
            case0:
                lineWidth="1";
                break;
            case1:
                lineWidth="4";
                break;
            case2:
                lineWidth="7";
                break;
        }

        context.closePath();
        context.beginPath();
        context.moveTo(x,y);
        context.strokeStyle=color;
        context.lineWidth=lineWidth;
        write=true;
    };
    canvas.onmousemove=function(e){
        if(write){
            context.lineTo(x,y);
            context.stroke();
        }
    };
    document.onmouseup=function(e){
        write=false;
    }
};


 


5.    主要思路分析：
      ①、首先如果想在画布上画出线条，我们需要知道笔（鼠标）的位置信息，所以可以进入画布在记录，也可以当鼠标进入网页就开始记录，需要用到onmousemove
      ②、其次是需要按下鼠标拖动时开始画图，松开鼠标停止画图，所以需要有一个开关来控制鼠标，取一个布尔变量就可以，同时需要用到onmousedown，onmousemove，onmouseup事件


              ③、保存画布上的图，到旁边的缓存区


              ④、清空画布


              ⑤、清空缓存区


 


6.    全部代码如下：


<!DOCTYPEhtml>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #can{
            border:2px solid red;
            position:absolute;
            left:0;
            top:100px;
            cursor:url("img/p1.png")048,auto;
        }
        .content{
            margin-top:10px;
        }
        .header{
            height:50px;
            margin:10px;
        }
        .header img{
            cursor:pointer;
        }
        .pan{
            border:1px solid transparent;
        }
        .choosePan{
            border:1px solid red;
        }
        .lineWidth{
            border:1px solid transparent;
        }
        .chooseLineWidth{
            border:1px solid red;
        }
        .left, .right{
            width:200px;
            display:inline;
            margin-right:150px;
        }

        .body{
            width:1100px;
        }
        .show{
            width:550px;
            height:500px;
            float:right;
        }
        .show div{
            width:160px;
            height:160px;
            margin:60px10px0 10px;
            border:1px solid black;
            float:left;
        }

        input{
            width:80px;
            height:30px;
        }
        .rightButton{
            margin:15px;
            float:right;
        }
    </style>

    <script>
        varcanvas;
        varcontext;
        varpan;
        varline;

        onload=function(){
            canvas=document.getElementById("can");
            context=canvas.getContext("2d");
            varx;
            vary;
            varwrite=false;

            document.onmousemove=function(e){
                x= e.clientX;
                y= e.clientY-100;
            };
            canvas.onmousedown=function(e){
                varcolor="red";
                varlineWidth="1";
                switch(pan){
                    case0:
                        color="red";
                        break;
                    case1:
                        color="green";
                        break;
                    case2:
                        color="blue";
                        break;
                }
                switch(line){
                    case0:
                        lineWidth="1";
                        break;
                    case1:
                        lineWidth="4";
                        break;
                    case2:
                        lineWidth="7";
                        break;
                }

                context.closePath();
                context.beginPath();
                context.moveTo(x,y);
                context.strokeStyle=color;
                context.lineWidth=lineWidth;
                write=true;
            };
            canvas.onmousemove=function(e){
                if(write){
                    context.lineTo(x,y);
                    context.stroke();
                }
            };
            document.onmouseup=function(e){
                write=false;
            }
        };

        functionchoosePan(cell,index){
            pan=index;
            switch(pan){
                case0:
                    canvas.style.cursor="url('img/p1.png') 0 48,auto";
                    break;
                case1:
                    canvas.style.cursor="url('img/p2.gif') 0 48,auto";
                    break;
                case2:
                    canvas.style.cursor="url('img/p3.gif') 0 48,auto";
                    break;
            }
            clearPan();
            cell.className="choosePan";
        }
        functionclearPan(){
            varpans=document.getElementsByClassName("choosePan");
            for(vari=0;i<pans.length;i++){
                pans[i].className="pan";
            }
        }
        functionchooseLineWidth(cell,index){
            line=index;
            clearLineWidth();
            cell.className="chooseLineWidth";
        }
        functionclearLineWidth(){
            varpans=document.getElementsByClassName("chooseLineWidth");
            for(vari=0;i<pans.length;i++){
                pans[i].className="lineWidth";
            }
        }

        functionclearCanvas(){
            context.strokeStyle="white";
            context.clearRect(0,0,500,500);
        }

        functionkeep(){
            varurl=canvas.toDataURL();
            varmyKeep=document.getElementsByClassName("divKeep");
            varindex=-1;
            for(vari=0;i<myKeep.length;i++){
                if(!myKeep[i].innerHTML){
                    index=i;
                    break;
                }
            }
            if(index==-1){
                alert("缓存已满！请先清除缓存。");
            }else{
                varwidth=myKeep[index].offsetWidth;
                myKeep[index].innerHTML="<img src="+url+"width="+width+"\>";
            }
        }

        functionclearKeep(){
            varmyKeep=document.getElementsByClassName("divKeep");
            for(vari=0;i<myKeep.length;i++){
                myKeep[i].innerHTML="";
            }
        }

    </script>
</head>
<body>
<divclass="content">
    <divclass="header">
        <divclass="left">
            <imgclass="choosePan"src="img/p1.png"onclick="choosePan(this,0)"/>
            <imgclass="pan"src="img/p2.gif"onclick="choosePan(this,1)"/>
            <imgclass="pan"src="img/p3.gif"onclick="choosePan(this,2)"/>
        </div>

        <divclass="right">
            <imgclass="chooseLineWidth"src="img/w3.png"onclick="chooseLineWidth(this,0)"/>
            <imgclass="lineWidth"src="img/w2.gif"onclick="chooseLineWidth(this,1)"/>
            <imgclass="lineWidth"src="img/w1.gif"onclick="chooseLineWidth(this,2)"/>
        </div>
    </div>

    <divclass="body">
        <canvasid="can"height="500"width="500"></canvas>
        <divclass="show">
            <divclass="divKeep"></div>
            <divclass="divKeep"></div>
            <divclass="divKeep"></div>
            <divclass="divKeep"></div>
            <divclass="divKeep"></div>
            <divclass="divKeep"></div>

            <inputclass="rightButton"type="button"value="清空"onclick="clearKeep()"/>
        </div>

    </div>
    <divclass="footer">
        <inputtype="button"value="保存"onclick="keep()"/>
        <inputtype="button"value="清空"onclick="clearCanvas()"/>
    </div>
</div>


</body>
</html>


 


到目前为止，完成了画图的基本功能，而且简单易使用。



相关文章