h5+js 画板canvas

1 概述
随着前端技术的发展，越来越多的H5技术被应用到实际开发中，本例讲述js应用到画板中，在本例中，可以改变画笔的颜色，调整画笔的粗细，清除画板内容，保存画板内容。
2 效果图如下：

3 主要功能
支持超简单使用
支持换画笔颜色
支持换画笔粗细
支持保存画板内容
支持清楚画板内容
。。。后续功能可以自己酌情添加

4实现方式
首先，我们需要两个div，分别承放各种颜色的画笔图片和可选择的画笔粗细图片。通过div的id就可以识别容器。代码如下：

<div id="pens">
<img src="img/red.gif"  id="red"  onclick="changecolor(this)"/>
<img src="img/green.gif"  id="blue" onclick="changecolor(this)"/>
<img src="img/blue.gif"  id="green" onclick="changecolor(this)"/>
</div>
<div id="cx">
<img src="img/pen-thin.gif"  id="thin" onclick="changecx(this)"/>
<img src="img/pen-medium.gif"  id="medium" onclick="changecx(this)"/>
<img src="img/pen-thick.gif"  id="thick" onclick="changecx(this)"/>
</div>

然后 ，我们需要一个画板，在这里只需要一个canvas就可以了，通过canvas的id就可以识别该容器，代码如下

<canvas width="500" height="300" id="can"></canvas>

接着我们放入一个div用来存放两个按钮(保存和清除),代码如下：

<div id="act">
    <input type="button" value="保存" onclick="saveimg()"/>
    <input type="button" value="清除" onclick="clearimg()"/>
</div>

接着就是在页面右侧放入一个div用于存放保存的img和清除按钮。代码如下：

<div class="saveimg">
    <img src="" alt="" style="width: 200px;height: 100px"/>
    <img src="" alt=""style="width: 200px;height: 100px"/>
    <img src="" alt="" style="width: 200px;height: 100px"/>
    <img src="" alt="" style="width: 200px;height: 100px"/>
    <img src="" alt="" style="width: 200px;height: 100px"/>
    <img src="" alt="" style="width: 200px;height: 100px"/>
    <input type="button" value="清除" onclick="clearsaveimg()"/>
</div>

好了，到此为止我们的准备工作已经完成了，下面需要开始x写js代码。

//获取画布
    var canvas=document.getElementById("can");
    //创建画笔
    var context=canvas.getContext("2d");
    //画笔颜色
    var color;
    //画笔粗细
    var pencx;

获取到这些信息数据后，下一步就是根据传递过来的数据改变画笔的颜色。这里我们的思路是在用户创建的容器里面添加一个onclick方法，当点击该img时，代表选中该图片代表的颜色。在js中定义该方法，获取承放img的该容器的所有子节点元素。选中时将在img中定义的函数参数的id传给要改变的颜色。
代码如下：

function changecolor(cell){
        context.beginPath();
        var pens=document.getElementById("pens");
        for(var i=0;i<pens.childElementCount;i++){
            pens.children[i].className=""
        }
        cell.className="pen";
//将img的id代表的颜色传给color
        color=cell.id;
}

第二步是改变画笔的粗细。与改变颜色的思路一样。在代表画笔粗细的图片中定义一个onclick方法，给他传参数代表粗细程度。通过if判断id的值，分别对应粗细的三种情况：2，4，6；代码如下：

function changecx(cell){
        context.beginPath();
        var cx=document.getElementById("cx");
        for(var i=0;i<cx.childElementCount;i++){
            cx.children[i].className=""
        }
        cell.className="cx";
        //三种情况
        if(cell.id=="thin"){
            pencx=2;
        }else if(cell.id=="medium"){
            pencx=4;
        }else{
            pencx=6;
        }
    }

到目前位置，我们实现了改变画笔颜色和粗细了，接下来要做的就是开始在画布上画画了啦。当鼠标按下的时候开始画，当鼠标释放的时候，停止画画。此时需要添加鼠标事件并且要画的时候需要获取鼠标的坐标。代码如下：

//画图
    var x;//鼠标的x坐标
    var y;//鼠标的y坐标
    var flag=0;//判断鼠标是否按下
    canvas.onmousedown=function(e){
        context.beginPath();
        flag=1;//鼠标按下
        x=e.offsetX;
        y= e.offsetY;;
        context.moveTo(x,y);//起始点
        context.lineWidth=pencx//线宽
        context.strokeStyle=color//线的颜色
}

要画画就需要鼠标移动，因此此时就要添加鼠标移动事件了。代码如下：

canvas.onmousemove=function(e){
        if(flag) {
            x = e.offsetX;
            y = e.offsetY;
//画到哪儿
            context.lineTo(x, y)
            context.stroke();
        }
    }    }

当鼠标停止按下的时候结束画画,因此需要添加鼠标事件，代码如下：

 canvas.onmouseup= function () {
        flag=0;
}

到此,我们就可以在画板上画画了。但是距离保存我们所画的还是差一步。接下来就是要保存我们画的步骤。具体代码如下：

//保存
    var imgurl;
    var num=0;
    function saveimg(){
        if(num==6){
            alert("已经存满了！")
        }else{
            imgurl=canvas.toDataURL();
            var saveimg=document.getElementsByClassName("saveimg")[0];
//将保存的画保存到右侧img中
            saveimg.children[num].src=imgurl;
            num++;
        }
}

此时，我们可以保存我们的画了，完善清除画布按钮,代码如下：

//清除画布
 function clearimg(){
 context.clearRect(0,0,500,300)
}

清除右侧img，具体代码如下：

//清除
    function clearsaveimg(){
        num=0;
        var saveimg=document.getElementsByClassName("saveimg")[0];
        for(var i=0;i<saveimg.childElementCount;i++){
            saveimg.children[i].src="";
        }
    }

==================

程序完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #can{
            border: 1px solid black;
            display: block;
            margin-left: 50px;
        }
        #pens{
            width: 180px;
            margin-top:  30px;
            margin-left: 50px;
        }
        #cx{
            position: absolute;
            width: 200px;
            left: 340px;
            top: 30px;
        }
        #act{
            width: 500px;
            margin-left: 50px;
            margin-top: 20px;
        }
        .saveimg{
            width: 500px;
            height: 300px;
            position: absolute;
            right: 100px;
            top: 80px;
        }
        .saveimg img{
            margin-top: 20px;
            margin-left: 5px;
            width: 150px;
            height: 100px;
            border: 2px solid black;
        }
        .saveimg input{
            margin-top: 10px;
            margin-left: 200px;
            width: 100px;
            height: 30px;
        }
        .div0{
            width: 100px;
            height: 100px;
            border: 1px solid lightgrey;
            display: inline-block;
            float: left;
            margin-left: 20px;
            margin-top: 20px;
        }
        .pen{
            border: 1px solid gray;
        }
        .cx{
            border: 1px solid gray;
        }
    </style>
</head>
<body>
<div id="pens">
    <img src="img/red.gif" alt="" id="red"  onclick="changecolor(this)"/>
    <img src="img/green.gif" alt="" id="green" onclick="changecolor(this)"/>
    <img src="img/blue.gif" alt="" id="blue" onclick="changecolor(this)"/>
</div>
<div id="cx">
    <img src="img/pen-thin.gif" alt="" id="thin" onclick="changecx(this)"/>
    <img src="img/pen-medium.gif" alt="" id="medium" onclick="changecx(this)"/>
    <img src="img/pen-thick.gif" alt="" id="thick" onclick="changecx(this)"/>
</div>
<canvas width="500" height="300" id="can"></canvas>
<div id="act">
    <input type="button" value="保存" onclick="saveimg()"/>
    <input type="button" value="清除" onclick="clearimg()"/>
</div>
<div class="saveimg">
    <img src="" alt="" style="width: 200px;height: 100px"/>
    <img src="" alt=""style="width: 200px;height: 100px"/>
    <img src="" alt="" style="width: 200px;height: 100px"/>
    <img src="" alt="" style="width: 200px;height: 100px"/>
    <img src="" alt="" style="width: 200px;height: 100px"/>
    <img src="" alt="" style="width: 200px;height: 100px"/>
    <input type="button" value="清除" onclick="clearsaveimg()"/>
</div>
</body>
<script>
    //获取画布
    var canvas=document.getElementById("can");
    //创建画笔
    var context=canvas.getContext("2d");
    //画笔颜色
    var color;
    //画笔粗细
    var pencx;

    function changecolor(cell){
        context.beginPath();
        var pens=document.getElementById("pens");
        for(var i=0;i<pens.childElementCount;i++){
            pens.children[i].className=""
        }
        cell.className="pen";
        color=cell.id;
    }

    function changecx(cell){
        context.beginPath();
        var cx=document.getElementById("cx");
        for(var i=0;i<cx.childElementCount;i++){
            cx.children[i].className=""
        }
        cell.className="cx";
        //三种情况
        if(cell.id=="thin"){
            pencx=2;
        }else if(cell.id=="medium"){
            pencx=4;
        }else{
            pencx=6;
        }
    }

    //画图
    var x;//鼠标的x坐标
    var y;//鼠标的y坐标
    var flag=0;//判断鼠标是否按下
    canvas.onmousedown=function(e){
        context.beginPath();
        flag=1;//鼠标按下
        x=e.offsetX;
        y= e.offsetY;;
        context.moveTo(x,y);//起始点
        context.lineWidth=pencx//线宽
        context.strokeStyle=color//线的颜色

    }
    canvas.onmousemove=function(e){
        if(flag) {
            x = e.offsetX;
            y = e.offsetY;
            context.lineTo(x, y)///终止点
            context.stroke();
        }
    }
    canvas.onmouseup= function () {
        flag=0;
    }

    //清除
    function clearimg(){
        context.clearRect(0,0,500,300)
    }
    //保存
    var imgurl;
    var num=0;
    function saveimg(){
        if(num==6){
            alert("已经存满了！")
        }else{
            imgurl=canvas.toDataURL();
            var saveimg=document.getElementsByClassName("saveimg")[0];
            saveimg.children[num].src=imgurl;
            num++;
        }
    }
    //清除
    function clearsaveimg(){
        num=0;
        var saveimg=document.getElementsByClassName("saveimg")[0];
        for(var i=0;i<saveimg.childElementCount;i++){
            saveimg.children[i].src="";
        }
    }
</script>
</html>