原生 js 实现 简易 画板

<div class="container">
	<canvas id="cavs" width="700" height="330"></canvas>
	<ul>
		<li><input  type="color" id="colorChange"></li>
		<li><input type="botton" id="cleanBoard" value="清屏"></li>
		<li><input type="botton"  id="eraser" value="橡皮"></li>
		<li><input type="botton" id="rescind" value="撤销"></li>
		<li><input type="range" value="线条粗细" id="lineRuler" min="1" max="20"></li>
	</ul>
	
</div>

css样式

*{

	margin: 0;
	padding: 0;

}
.container{

	margin: 30px;

}
#cavs{

	border: 1px solid green;
	border-radius: 10px;
    box-shadow: 10px 10px 5px #888;
    margin-bottom: 20px;

}

ul li{

	display: inline-block;

}
ul li input{

	text-align: center;
	width: 49px;
	margin-left: 78px;
	background: green;
	border: none;
	font-size:20px;
	border-radius: 2px;
	cursor: pointer;
	transition-duration: 0.2s;

}
ul li input:hover{

	border: 1px solid black;
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24);

}
ul li #colorChange{

	background: green;
    border: none;

}

js部分

var drawingBoard = {

		  cavs : document.getElementById('cavs'),
		  ctx : document.getElementById('cavs').getContext('2d'),
		  colorChange : document.getElementById('colorChange'),
		  lineRuler : document.getElementById('lineRuler'),
	 	  bool : false,
		  imgArr : [], 
		  init : function(){
	      this.ctx.LineCap = "round";
	      t his.drawing();
          this.btnsAllfn();
},

btnsAllfn:function(){

 var self = this;
 this.colorChange.onchange = function(){
   self.ctx.strokeStyle = this.value;
 }

 this.lineRuler.onchange = function(){
   self.ctx.lineWidth = this.value;
 }
  
 var btnsUlNode = document.getElementsByTagName('ul')[0];
 
 btnsUlNode.onclick = function(e){

   var tar = e.target.id;

   switch(tar){

     case "cleanBoard" :
  
   self.ctx.clearRect(0,0,self.cavs.offsetWidth,self.cavs.offsetHeight);
   break;
 
   case "eraser" :

   self.ctx.strokeStyle = "#fff";
   break;
  
   case "rescind" :

   if (self.imgArr.length > 0) {
  
    self.ctx.putImageData(self.imgArr.pop(),0,0);
  }
  break;

}

  } 
},

drawing:function(){

	 var self = this;
	 
	 var cavs = this.cavs;

	 var c_left = cavs.offsetLeft;
 
	 var c_top = cavs.offsetTop;

	 this.cavs.onmousedown = function(e){
	       self.bool = true;
 
	       self.ctx.beginPath();
	       
	       self.ctx.moveTo(e.pageX-c_left,e.pageY-c_top);//定义线条开始坐标
	       
	       var imgData = self.ctx.getImageData(0,0,self.cavs.offsetWidth,self.cavs.offsetHeight);
	      
	     
	      self.imgArr.push(imgData);
	     // console.log("imgData");
	     
	     this.onmousemove = function(e){
	      if (self.bool) {

	       self.ctx.lineTo(e.pageX-c_left,e.pageY-c_top);
	     
	       self.ctx.stroke();
	     }
	   }
	  
	   this.onmouseup = function(e){
 
	     self.ctx.closePath();
	      
	     this.onmousemove = null;
	     self.bool = false;
	   }
	 
	   this.onmouseleave = function(e){
	     self.ctx.closePath();
	     this.onmousemove = null;
	     self.bool = false;

   }
  }
 } 
} 

drawingBoard.init();