（canvas入门案例）vue利用canvas实现在线签名

导读

最近看了三心大佬的canvas教程（发现新玩具），canvas真**好玩（优美中国话），附上三心大佬教程
https://juejin.cn/post/6986785259966857247。废话不多说，上正餐

创建canvas标签

<canvas
        ref="saveCanvas"
        width="600"
        height="400"
        @mousedown="ctxDown"
        @mousemove="ctxMove($event)"
        @mouseup="ctxUp"
        @mouseleave="ctxUp"
      ></canvas>

获取canvas上下文对象

刚学vue的同学注意，这里获取对象一定要放在mounted里。等页面dom加载完才能获取到对象，做echarts同理

  mounted() {
    this.canvasDom = this.$refs.saveCanvas;
    this.ctx = this.canvasDom.getContext("2d"); //获得 2d 上下文对象
  },

描线

为了防止两次描线向连接，这里采用：beginPath，closePath
beginPath，closePath可以理解为开、关画笔
ctx.lineCap = “round”; 、 ctx.lineJoin = “round”; 、 ctx.shadowBlur = 1;、 ctx.shadowColor = “#000”; 使画笔更加顺滑

    ctxDown() {
      const canvas = this.canvasDom;
      this.isDowm = true;
      this.ctx.beginPath();
    },
    ctxMove(e) {
      if (!this.isDowm) return;
      const ctx = this.ctx;
      //获得鼠标位置
      let x = e.pageX - this.canvasDom.offsetLeft;
      let y = e.pageY - this.canvasDom.offsetTop;
      ctx.lineCap = "round"; //线冒为圆角
      ctx.lineJoin = "round"; //指定条线交汇时为圆形边角
      ctx.shadowBlur = 1;
      ctx.shadowColor = "#000"; //利用阴影模糊锯齿
      // ctx.moveTo(x, y);
      ctx.lineTo(x, y); // lineTo设置画线经过点
      ctx.stroke(); // 执行画线段的操作
    },
    ctxUp() {
      this.isDowm = false;
      this.ctx.closePath();
    },

保存

这里参考三心大佬的方法，点击保存创建一个a标签，这里可以使用 toDataURL() 给a标签添加canvas图片连接。

saveImg() {
      const url = this.canvasDom.toDataURL();//创建图片连接
      const a = document.createElement("a");
      a.download = "图片";
      a.href = url;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },

清空

当然用户也有可能发挥失误想重新绘画的好看些

clearCanvas() {
      this.ctx.clearRect(0, 0, 600, 400);
    },

完整代码

<template>
  <div>
    <div>
      <canvas
        class="saveCanvas"
        ref="saveCanvas"
        width="600"
        height="400"
        @mousedown="ctxDown"
        @mousemove="ctxMove($event)"
        @mouseup="ctxUp"
        @mouseleave="ctxUp"
      ></canvas>
      <button @click="clearCanvas">清除</button>
      <button @click="saveImg">保存</button>
    </div>
    <!-- <img :src="imgUrl" alt="" /> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      canvasDom: null,
      ctx: null,
      isDowm: false,
    };
  },
  mounted() {
    this.canvasDom = this.$refs.saveCanvas;
    this.ctx = this.canvasDom.getContext("2d"); //获得 2d 上下文对象
  },
  methods: {
      ctxDown() {
      const canvas = this.canvasDom;
      this.isDowm = true;
      this.ctx.beginPath();
    },
    ctxMove(e) {
      if (!this.isDowm) return;
      const ctx = this.ctx;
      //
      let x = e.pageX - this.canvasDom.offsetLeft;
      let y = e.pageY - this.canvasDom.offsetTop;
      ctx.lineCap = "round"; //线冒为圆角
      ctx.lineJoin = "round"; //指定条线交汇时为圆形边角
      ctx.shadowBlur = 1;
      ctx.shadowColor = "#000"; //利用阴影模糊锯齿
      // ctx.moveTo(x, y);
      ctx.lineTo(x, y); // lineTo设置画线经过点
      ctx.stroke(); // 执行画线段的操作
    },
    ctxUp() {
      this.isDowm = false;
      this.ctx.closePath();
    },
    saveImg() {
      // const img = this.ctx.getImageData(0, 0, 600, 400);
      const url = this.canvasDom.toDataURL();
      const a = document.createElement("a");
      a.download = "图片";
      a.href = url;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
    clearCanvas() {
      this.ctx.clearRect(0, 0, 600, 400);
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.saveCanvas {
  border: 1px solid #333;
}

</style>

结尾

学不动了学不动了，前端怎么能有这么多要学的…