Canvas鼠标手写签名-vue

---

<template>
  <div>
    <!-- <div class="container">
      <input type="radio" name="tool" id="huabi" checked>
      <label for="huabi">画笔</label>
    </div> -->
    <canvas style="z-index:9999" width="800" height="600"></canvas>
    <p @click="clear" >重画</p>
    <p @click="toImg">转化</p>
  </div>
</template>
<script>
// import draw from './draw.js'
export default {
  data() {
    return {
      canvas:{}
    }
  },
  mounted() {
    this.do()
  },
  methods: {
    do() {
      var tool = "huabi";
      // debugger
      this.canvas = document.querySelector("canvas");
      var x, y;
      // var canvas = document.querySelector("canvas");
      var ctx = this.canvas.getContext("2d");
      ctx.fillStyle = 'red'

      const _this = this

      this.canvas.onmousedown = function(event) {
        x = event.clientX - this.offsetLeft;
        y = event.clientY - this.offsetTop;
        document.onmousemove = function(event) {
          var x1 = event.clientX - _this.canvas.offsetLeft;
          var y1 = event.clientY - _this.canvas.offsetTop;
          // this.huabi(x, y, x1, y1, ctx);
          ctx.beginPath();
      ctx.globalAlpha = 1;
      ctx.lineWidth = 2;
      ctx.strokeStyle = "#000";
      ctx.moveTo(x, y);
      ctx.lineTo(x1, y1);
      ctx.closePath();
      ctx.stroke();
          x = x1;
          y = y1;
        };
      };

      document.onmouseup = function() {
        this.onmousemove = null;
      };
    },
    clear(){
      document.querySelector("canvas").getContext("2d").clearRect(0,0,800,600)
    },
    toImg(){
      var image = new Image();
      image.src = this.canvas.toDataURL("image/png");
      return image;
    }
    // huabi(startX, startY, endX, endY, ctx) {
    //   ctx.beginPath();
    //   ctx.globalAlpha = 1;
    //   ctx.lineWidth = 2;
    //   ctx.strokeStyle = "#000";
    //   ctx.moveTo(startX, startY);
    //   ctx.lineTo(endX, endY);
    //   ctx.closePath();
    //   ctx.stroke();
    // }
  }
};
</script>
复制代码

转载于:https://juejin.im/post/5ce3cfd5e51d4577565366f0