基于 canvas 的手写板 js 封装

代码封装基于  https://blog.csdn.net/javabaidu/article/details/84600901

进行了类封装，并且调整了笔尖的位置

 (function (window) {
        function WriteBoard(container, size, color) {
          this.canvas = {};
          this.board = {};
          this.mousePress = false;
          this.last = null;

          WriteBoard.prototype.init = function () {
            this.canvas = document.createElement("canvas");
            container.appendChild(this.canvas);
            this.canvas.width = container.clientWidth;
            this.canvas.height = container.clientHeight;

            this.board = this.canvas.getContext("2d");

            this.board.lineWidth = size;
            this.board.strokeStyle = color;

            var _this = this;

            var beginDraw = function () {
              _this.beginDraw.call(_this);
            };
            var drawing = function (event) {
              _this.drawing.call(_this, event);
            };
            var endDraw = function (event) {
              _this.endDraw.call(_this, event);
            };

            this.canvas.onmousedown = beginDraw;
            this.canvas.onmousemove = drawing;
            this.canvas.onmouseup = endDraw;

            this.canvas.addEventListener("touchstart", beginDraw, false);
            this.canvas.addEventListener("touchmove", drawing, false);
            this.canvas.addEventListener("touchend", endDraw, false);
          };

          if (!WriteBoard.prototype.__init__) {
            WriteBoard.prototype.beginDraw = function () {
              this.mousePress = true;
            };

            WriteBoard.prototype.drawing = function (event) {
              event.preventDefault();
              if (!this.mousePress) return;
              var xy = this.pos(event);
              if (this.last != null) {
                this.board.beginPath();
                this.board.moveTo(this.last.x, this.last.y);
                this.board.lineTo(xy.x, xy.y);
                this.board.stroke();
              }
              this.last = xy;
            };

            WriteBoard.prototype.endDraw = function (event) {
              this.mousePress = false;
              event.preventDefault();
              this.last = null;
            };

            WriteBoard.prototype.pos = function (event) {
              var x, y;
              if (this.isTouch(event)) {
                x = event.touches[0].pageX;
                y = event.touches[0].pageY;
              } else {
                x = event.offsetX + event.target.offsetLeft;
                y = event.offsetY + event.target.offsetTop;
              }
              return { x: x - 10, y: y - 10 }; // -10 为了让笔尖在鼠标尖
            };

            WriteBoard.prototype.isTouch = function (event) {
              var type = event.type;
              if (type.indexOf("touch") >= 0) {
                return true;
              } else {
                return false;
              }
            };

            WriteBoard.prototype.save = function () {
              //base64
              var dataUrl = this.canvas.toDataURL();
              return dataUrl;
            };

            WriteBoard.prototype.clean = function () {
              this.board.clearRect(
                0,
                0,
                this.board.canvas.width,
                this.board.canvas.height
              );
            };
            WriteBoard.prototype.__init__ = true;
          }
        }
        window.HandWriteBoard = function (container, size, color) {
          var argLength = arguments.length;
          var board = {};
          if (argLength == 2)
            board = new WriteBoard(container, size, "#333333");
          else if (argLength == 3)
            board = new WriteBoard(container, size, color);
          else board = new WriteBoard(container, 5, "#333333");
          board.init();
          return board;
        };
      })(window);

使用：

<div id="myCanvas" style="width: 700px; height: 500px;border: 1px solid #999999;"></div>

    <div>
      <button onclick="clean();">清 空</button>
      <button onclick="save();">生成图片</button>
    </div>

    <img id="img" alt="请涂鸦……" />

指定一个容器即可 

var board = HandWriteBoard(document.getElementById("myCanvas"));
      var img = document.getElementById("img");
      function clean() {
        board.clean();
        img.src = "";
      }
      function save() {
        var data = board.save();
        img.src = data;
      }