js实现简单画图功能

JS实现简单画图

1 概述

   随着前端技术的发展，越来越多的小东西简单又实用，在这里我实现了一个画笔画图的小玩意。让我们一起看吧。

2 效果图如下：

 

3 主要功能

支持超简单使用

支持选择画笔的颜色

支持选择画笔粗细

支持保存

支持清空

支持保存为图片

支持下载

4实现方式

首先，我们呢先把布局样式实现好，我们可以从网络上获取，三种颜色笔的图片，以及三种粗细种类的图片。创建一个画布，也就是我们的画板，在创建多个展示台，也就是几个div，来存放我们的画。

在创建三个按钮，分别有保存画，清空画布，清空展示台的作用。

下面是各个标签的创建以及CSS3样式的设置。

<bodystyle="position:relative">
<imgsrc="图片/红.gif"id="img_hong"  onclick="bi('hong')"alt=""/>
<imgsrc="图片/蓝.gif"id="img_lan"onclick="bi('lan')"alt=""/>
<imgsrc="图片/绿.gif"id="img_lv"onclick="bi('lv')"alt=""/>
<br/>
<imgsrc="图片/小.gif"id="img_xiao"onclick="cuxi(3)"alt=""/>
<imgsrc="图片/中.gif"id="img_zhong"onclick="cuxi(10)"alt=""/>
<imgsrc="图片/大.gif"id="img_da"    onclick="cuxi(25)"alt=""/>
<br/>
<canvasid="canvas_zhumianban"width="300"height="300"></canvas>
<divid="div_zhanshi1"></div>
<divid="div_zhanshi2"></div>
<divid="div_zhanshi3"></div>
<divid="div_zhanshi4"></div>
<divid="div_zhanshi5"></div>
<divid="div_zhanshi6"></div>
<br/>
<inputtype="button"value="save"onclick="save()"/>
<inputtype="button"value="clear"onclick="clearCanvas()"/>
<inputtype="button"value="clearall"onclick="clearall()"/>
</body>

以上是body的内容，我们可以看到，body给了定位，relative属性，方便我们下面的其他标签的定位，添加六张图图片，代表三种画笔，三种粗细种类，分别给予点击事件，添加一个画布，来作画，六个div展示台，三个按钮，分别给予点击事件。

<style>
    *{
        margin: 0;
        padding: 0;
    }
  #canvas_zhumianban{
        border:3px solid firebrick;
    }
  #div_zhanshi1{
      width: 300px;
      height: 300px;
      border:1px solid black;
      position: absolute;
      left: 410px;
      top: 0;
  }
  #div_zhanshi2{
      width: 300px;
      height: 300px;
      border:1px solid indigo;
      position: absolute;
      top: 0;
      left: 725px;
  }
  #div_zhanshi3{
      width: 300px;
      height: 300px;
      border:1px solid darkblue;
      position: absolute;
      top: 0;
      left: 1040px;
  }
  #div_zhanshi4{
      width: 300px;
      height: 300px;
      border:1px solid gold;
      position: absolute;
      left: 410px;
      top: 320px;
  }
  #div_zhanshi5{
      width: 300px;
      height: 300px;
      border:1px solid darkred;
      position: absolute;
      top: 320px;
      left: 725px;
  }
  #div_zhanshi6{
      width: 300px;
      height: 300px;
      border:1px solid lightsalmon;
      position: absolute;
      top: 320px;
      left: 1040px;
  }

以上是各个标签的样式，首先量子化，接下来样式大家可以自己看。

外观差不多完成了，接下来我们就要创建JS函数，来实现各种功能了。

function bi(e)
{
    var img_hong=document.getElementById("img_hong");
    var img_lan=document.getElementById("img_lan");
    var img_lv=document.getElementById("img_lv");
    if(e=="hong"){
        img_lan.style.backgroundColor="white";
        img_lv.style.backgroundColor="white";
        img_hong.style.backgroundColor="red";
        huabiAction('red');
    }
    if(e=="lan"){
        huabiAction('blue');
        img_lv.style.backgroundColor="white";
        img_hong.style.backgroundColor="white";
        img_lan.style.backgroundColor="blue";
    }
    if(e=="lv"){
        huabiAction('green');
        img_hong.style.backgroundColor="white";
        img_lan.style.backgroundColor="white";
        img_lv.style.backgroundColor="green";
    }
}

这个函数是画笔的点击事件，每次点击一个画笔就将画笔的参数穿过来，hong就是点击的红色画笔，以此类推，并且把相应的画笔的背景色变化一下，让我们知道选择的哪种颜色的画笔，同时，我们调用

 huabiAction();里面的参数是代表画笔的颜色，给画笔的颜色属性赋值。

 

function huabiAction(color){
    var canvas=document.getElementById("canvas_zhumianban");
    var cxt=canvas.getContext("2d");
    cxt.strokeStyle=""+color+"";
    cxt.beginPath();
    cuxi();
    canvas.onmousedown=function(e){
      cxt.moveTo(e.clientX-canvas.offsetLeft,e.clientY-canvas.offsetTop);
       document.onmousemove=function(e) {
            cxt.lineTo(e.clientX- canvas.offsetLeft, e.clientY- canvas.offsetTop);
            cxt.stroke();
           document.onmouseup=function(e){
               document.onmousedown=null;
               document.onmousemove=null;
            };
        };
   };
}

这就是上文提到的huabiAction 函数，这个函数实现的作用是给画笔附上颜色，然后给予画布按下，鼠标的移动，鼠标松开事件。记住按下事件是在画布上的，获取到鼠标在画布上的坐标，同时也是画笔开始画的起始位置，移动，松开是在document上的，因为移动的是鼠标，不是画布。这样就能实现鼠标在画布上按下移动松开即可画出图画的功能。其中的cuxi 这个函数是选择画笔粗细的，接下来我们来看这个函数。

function cuxi(e){
    var canvas=document.getElementById("canvas_zhumianban");
    var cxt=canvas.getContext("2d");
    cxt.lineWidth=e;
    var img_xiao=document.getElementById("img_xiao");
    var img_zhong=document.getElementById("img_zhong");
    var img_da=document.getElementById("img_da");
    if(e==3){
        cxt.beginPath();
        img_da.style.background="white";
        img_zhong.style.background="white";
        img_xiao.style.background="black";
    }
    if(e==10){
        cxt.beginPath();
        img_da.style.background="white";
        img_zhong.style.background="black";
        img_xiao.style.background="white";
    }
    if(e==25){
        cxt.beginPath();
        img_da.style.background="black";
        img_zhong.style.background="white";
        img_xiao.style.background="white";
    }
    return cxt.lineWidth;
}

这个函数是决定画笔的粗细，我们一共有三种粗细可以选择，分别三像素，十像素，二十五像素。这里为什么要每次  cxt.beginPath(); 是因为如果不这样做就会把之前的画的轨迹也给变成当前的颜色和粗细。

function clearCanvas()
{
    var c=document.getElementById("canvas_zhumianban");
    var cxt=c.getContext("2d");
    cxt.clearRect(0,0,c.width,c.height);
}
var i=1;
function save(){
    if(i>6){
        return;
    }
    var c=document.getElementById("canvas_zhumianban");
    var image= new Image();
    image.src= c.toDataURL("image/png");
    var div1=document.getElementById("div_zhanshi"+i+"");
    div1.appendChild(image);
    i++;
}
function clearall(){
    for(varj=1;j<=6;j++){
        var div11=document.getElementById("div_zhanshi"+j+"");
        var image=div11.firstElementChild;
        div11.removeChild(image);
        i=1;
    }
}

 最后是三个按钮的点击事件，第一个清空画布的内容，第二个是将我们的画保存到展示台上，就是把展示台div的内容变成画布的内容，最后是展示台清空，会把六个展示台的内容全部清空，展示台中的图片可以下载保存。

5 全代码

到这里我们的功能基本实现了，最后附上完整代码供大家参考，也希望大家多多指教。

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
      #canvas_zhumianban{
            border:3px solid firebrick;
        }
      #div_zhanshi1{
          width: 300px;
          height: 300px;
          border:1px solid black;
          position: absolute;
          left: 410px;
          top: 0;
      }
      #div_zhanshi2{
          width: 300px;
          height: 300px;
          border:1px solid indigo;
          position: absolute;
          top: 0;
          left: 725px;
      }
      #div_zhanshi3{
          width: 300px;
          height: 300px;
          border:1px solid darkblue;
          position: absolute;
          top: 0;
          left: 1040px;
      }
      #div_zhanshi4{
          width: 300px;
          height: 300px;
          border:1px solid gold;
          position: absolute;
          left: 410px;
          top: 320px;
      }
      #div_zhanshi5{
          width: 300px;
          height: 300px;
          border:1px solid darkred;
          position: absolute;
          top: 320px;
          left: 725px;
      }
      #div_zhanshi6{
          width: 300px;
          height: 300px;
          border:1px solid lightsalmon;
          position: absolute;
          top: 320px;
          left: 1040px;
      }
    </style>
    <script>

        //画笔的点击事件
        functionbi(e)
        {
            var img_hong=document.getElementById("img_hong");
            var img_lan=document.getElementById("img_lan");
            var img_lv=document.getElementById("img_lv");
            if(e=="hong"){
                img_lan.style.backgroundColor="white";
                img_lv.style.backgroundColor="white";
                img_hong.style.backgroundColor="red";
                huabiAction('red');
            }
            if(e=="lan"){
                huabiAction('blue');
                img_lv.style.backgroundColor="white";
                img_hong.style.backgroundColor="white";
                img_lan.style.backgroundColor="blue";
            }
            if(e=="lv"){
                huabiAction('green');
                img_hong.style.backgroundColor="white";
                img_lan.style.backgroundColor="white";
                img_lv.style.backgroundColor="green";
            }
        }

        function huabiAction(color){
            var canvas=document.getElementById("canvas_zhumianban");
            var cxt=canvas.getContext("2d");
            cxt.strokeStyle=""+color+"";
            cxt.beginPath();
            cuxi();
            canvas.onmousedown=function(e){
              cxt.moveTo(e.clientX-canvas.offsetLeft,e.clientY-canvas.offsetTop);
               document.onmousemove=function(e) {
                    cxt.lineTo(e.clientX- canvas.offsetLeft, e.clientY- canvas.offsetTop);
                    cxt.stroke();
                   document.onmouseup=function(e){
                       document.onmousedown=null;
                       document.onmousemove=null;
                    };
                };
           };
        }
        //获取画笔粗细
        functioncuxi(e){
            var canvas=document.getElementById("canvas_zhumianban");
            var cxt=canvas.getContext("2d");
            cxt.lineWidth=e;
            var img_xiao=document.getElementById("img_xiao");
            var img_zhong=document.getElementById("img_zhong");
            var img_da=document.getElementById("img_da");
            if(e==3){
                cxt.beginPath();
                img_da.style.background="white";
                img_zhong.style.background="white";
                img_xiao.style.background="black";
            }
            if(e==10){
                cxt.beginPath();
                img_da.style.background="white";
                img_zhong.style.background="black";
                img_xiao.style.background="white";
            }
            if(e==25){
                cxt.beginPath();
                img_da.style.background="black";
                img_zhong.style.background="white";
                img_xiao.style.background="white";
            }
            return cxt.lineWidth;
        }
        function clearCanvas()
        {
            var c=document.getElementById("canvas_zhumianban");
            var cxt=c.getContext("2d");
            cxt.clearRect(0,0,c.width,c.height);
        }
        var i=1;
        function save(){
            if(i>6){
                return;
            }
            var c=document.getElementById("canvas_zhumianban");
            var image= new Image();
            image.src= c.toDataURL("image/png");
            var div1=document.getElementById("div_zhanshi"+i+"");
            div1.appendChild(image);
            i++;
        }
        function clearall(){
            for(varj=1;j<=6;j++){
                var div11=document.getElementById("div_zhanshi"+j+"");
                var image=div11.firstElementChild;
                div11.removeChild(image);
                i=1;
            }
        }

    </script>
</head>
<bodystyle="position:relative">
<imgsrc="图片/红.gif"id="img_hong"  onclick="bi('hong')"alt=""/>
<imgsrc="图片/蓝.gif"id="img_lan"onclick="bi('lan')"alt=""/>
<imgsrc="图片/绿.gif"id="img_lv"onclick="bi('lv')"alt=""/>
<br/>
<imgsrc="图片/小.gif"id="img_xiao"onclick="cuxi(3)"alt=""/>
<imgsrc="图片/中.gif"id="img_zhong"onclick="cuxi(10)"alt=""/>
<imgsrc="图片/大.gif"id="img_da"    onclick="cuxi(25)"alt=""/>
<br/>
<canvasid="canvas_zhumianban"width="300"height="300"></canvas>
<divid="div_zhanshi1"></div>
<divid="div_zhanshi2"></div>
<divid="div_zhanshi3"></div>
<divid="div_zhanshi4"></div>
<divid="div_zhanshi5"></div>
<divid="div_zhanshi6"></div>
<br/>
<inputtype="button"value="save"onclick="save()"/>
<inputtype="button"value="clear"onclick="clearCanvas()"/>
<inputtype="button"value="clearall"onclick="clearall()"/>


</body>
</html>