JS实现canvas简单小画板功能

本文实例为大家分享了JS实现canvas简单小画板的具体代码，供大家参考，具体内容如下

Html部分：

CSS部分：

*{
  margin: 0;
  padding: 0;
  list-style: none;
}
.container{
  margin: 30px;
}
#cavs{
  border: 1px solid red;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  border-radius: 10px;
}
.container ul{
  margin-top: 20px;
  width: 700px;
  text-align: center;
}
.container ul li{
  display: inline-block;
  margin-left: 35px;
}
.container ul li input{
  padding: 6px 15px;
  border-radius: 10px;
  border: none;
  outline: none;
  cursor: pointer;
  transition: box-shadow 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.container ul li input:hover{
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

JS部分：

var drawingBoard = {
  cavs: document.getElementById('cavs'),
  ctx: document.getElementById('cavs').getContext('2d'),
  ul_node: document.getElementsByTagName('ul')[0],
  colorBoard: document.getElementById('color'),
  lineRuler: document.getElementById('lineRuler'),
  imgArr: [],//存放图片
  init: function () {
    this.ctx.lineCap = 'round';
    this.ctx.lineJoin = 'round';
    this.drawing();//开始画画
    this.btnsFnAll();
  },
  drawing: function () {
    var self = this;
    var left = this.cavs.offsetLeft;
    this.cavs.onmousedown = function (e) {
      var e_x = e.pageX;//鼠标在画布上的x点
      var e_y = e.pageY;
      self.ctx.beginPath();//开始绘制
      self.ctx.moveTo(e_x - left, e_y - left);//落笔点，开始点
      var imgData = self.ctx.getImageData(0, 0, self.cavs.offsetWidth, self.cavs.offsetHeight);
      self.imgArr.push(imgData)
      document.onmousemove = function (e) {
 self.ctx.lineTo(e.pageX - left, e.pageY - left);//落笔点，开始点
 self.ctx.stroke();
      }
      document.onmouseup = function () {
 document.onmousemove = null;
 self.ctx.closePath();//闭合当前的路径 结束绘制
      }
      this.onpointerleave = function () {
 document.onmousemove = null;
      }
    }
  },
  btnsFnAll: function () {
    var self = this;
    this.ul_node.addEventListener('click', function (e) {
      console.log(e.target.id);
      switch (e.target.id) {
 case 'cleanBoard'://清屏
   self.ctx.clearRect(0, 0, self.cavs.offsetWidth, self.cavs.offsetHeight)
   break;
 case 'eraser'://橡皮
   self.ctx.strokeStyle = "#ffffff";
   break;
 case 'save'://保存
   let url = self.cavs.toDataURL('image/jpg');
   let a = document.createElement('a');
   document.body.appendChild(a);
   a.href = url;
   a.download = '草稿纸';
   a.target = '_blank';
   a.click()
   break;
 case 'rescind'://撤销
   console.log(self.imgArr)
   if (self.imgArr.length > 0) {
     self.ctx.putImageData(self.imgArr.pop(), 0, 0)
   }
   break;
      }
    });
    this.colorBoard.onchange = function () {
      self.ctx.strokeStyle = this.value;
    };
    this.lineRuler.onchange = function () {
      self.ctx.lineWidth = this.value
    }
  }
}
drawingBoard.init();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。