<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

    var cavs = document.getElementById("cavs");           //获取canvas

    var ctx = cavs.getContext("2d");                     //可以理解为生成一个2d画笔

        ctx.moveTo(100, 100);                           //落笔点

        ctx.lineTo(200, 200);                          //结束点

         ctx.strokeStyle = "#f00"                 //线条的颜色2

         ctx.lineWidth = 10;                    //线条粗细

　　　　　 ctx.stroke();            //绘制线条

　　　　　ctx.fillStyle = "yellow";            //填充颜色
　　　　　ctx.fill();                //进行填充

         ctx.beginPath();    //开始

         ctx.closePath();    //结束

         var img = ctx.getImageData(x, y, width, height);     //截取canvas中图案

         ctx.putImageData(img, width, height)            //将img放到canvas中

         ctx.clearRect(x,y,canvas.width,canvas.height)         //清除画布

<div class="wrapper">

    <canvas id="cavs" width="1000" height="500"></canvas>

    <ul class="btn-list">

        <li><input type="color" id="colorBoard"></li>

        <li><input type="button" id="cleanBoard" value="清屏"></li>

        <li><input type="button" id="eraser" value="橡皮"></li>

        <li><input type="button" id="rescind" value="撤销"></li>

        <li><input type="range" id="lineRuler" value="线条" min="1" max="30"></li>

    </ul>

</div>

*{

  padding:;

  margin:;

}

.wrapper{

  margin: 15px;

}

.wrapper canvas{

  border:1px solid #000;

  border-radius: 25px;

  box-shadow:10px 10px 5px #999;

  margin-bottom: 20px;

}

.wrapper ul{

  width: 1000px;

  text-align: center;

}

.wrapper ul li{

  display: inline-block;

  margin-left: 40px;

}

.wrapper ul li input{

  display: block;

  background: #ddd;

  color: #000;

  border-radius: 25px;

  border:none;

  padding: 10px 20px;

  font-size: 15px;

  transition-duration: 0.2s;

}

.wrapper ul li input:hover{

  background: #999;

  border: 1px solid #f00;

  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.3);

}

function ID(str) {

  return document.getElementById(str);

}

var darwingLineObj = {

  cavs:this.ID("canvas"),

  color:this.ID("color"),

  clear:this.ID("clear"),

  eraser:this.ID("eraser"),

  rescind:this.ID("rescind"),

  weight:this.ID("weight"),

  bool:false,

  arrImg:[],

  //初始化

  init:function(){

    this.draw();

  },

  draw:function(){

    var cavs = this.cavs,

        self = this,

        ctx = cavs.getContext("2d");

        ctx.lineWidth = 15;

        ctx.lineCap = "round";          //线条始终的样式

        ctx.lineJoin = "round";         //转弯的圆角

    var c_x = cavs.offsetLeft,          //元素距离左侧的位置

        c_y = cavs.offsetTop;           //canvas距离顶部

    cavs.onmousedown = function(e){

      e = e || window.event;

      self.bool = true;

      var m_x = e.pageX - c_x;

      var m_y = e.pageY - c_y;

      ctx.beginPath();

      ctx.moveTo(m_x,m_y);   //鼠标在画布上的触点

      var imgData = ctx.getImageData(0, 0, cavs.width, cavs.height);  //将每次画完拷贝到数组中

      self.arrImg.push(imgData);

    }

    cavs.onmousemove = function(e){

        if(self.bool){

          ctx.lineTo(e.pageX-c_x, e.pageY-c_y);

          ctx.stroke();

        }

      }

    cavs.onmouseup = function(e){

      self.bool = false;

      ctx.closePath();

    }

    self.color.onchange = function(e){      //设置颜色

      e = e || window.event;

      //console.log(e.target.value)

      ctx.strokeStyle = e.target.value;

    }

    self.clear.onclick = function(){

      ctx.clearRect(0,0,cavs.width,cavs.height)

    }

    self.eraser.onclick = function(){

      ctx.strokeStyle = "#fff";

    }

    self.rescind.onclick = function(){            //撤销的重点难点

      if (self.arrImg.length>0) {

        ctx.putImageData(self.arrImg.pop(),0,0)

      }

    }

    self.weight.onchange = function(e){       //设置线条粗细

      //console.log(e.target.value)

      ctx.lineWidth = e.target.value;

    }

   }//draw end

}

darwingLineObj.init();