vue2 + canvas 实现简易画板

前言

这两天在做QQ聊天机器人，目前也实现了一些功能

准备往里面加一些小游戏的功能，思来想去就准备自己实现一个简易版的你画我猜，但是QQ肯定不支持我发个画板过来，于是便诞生了这个网站picture_board (gitee.io)。网站部署在gitee pages上，感兴趣可以去picture_board(gitee.com)下载源代码。

实现思路

整个页面比较简单，上下的两栏布局。上面是canvas的绘画区域，下面是功能选择区域。（请忽略计时框，这个是为了在你画我猜中，提醒绘画时间用的）

canvas准备

首先在template模板里填入canvas元素

<template>
  <div id="bottom">
    <canvas
      id="canvas"
      @mousedown="down($event)"
      @mousemove="move($event)"
      @mouseup="up"
      @mouseenter="enter"
      @touchstart="start($event)"
      @touchmove="move2($event)"
      @touchend="up"
    ></canvas>
  </div>
</template>

本来我是在canvas便签里面添加了style来设置宽高来实现剩余区域的自动填充（flex:1）,但是一番调试之后，页面上怎么搞没有画的痕迹，整整一个上午的时间，都没有任何进展，后来吃饭的时候，我突然意识到可能是宽高的设置方式不对，改过之后发现真的是这个原因，直接老泪纵横。。。

let that = this;
that.canvas = document.getElementById("canvas");
that.cxt = that.canvas.getContext("2d");

canvas.width = that.width;
canvas.height = that.height;

width和height也是根据页面比例计算的

this.width = document.documentElement.clientWidth;
this.height = document.documentElement.clientHeight * 0.9;

pc端绘画

主要相关的是三个事件

1. 点击鼠标
2. 移动鼠标
3. 松开鼠标

当鼠标点击时用一个变量记录下该坐标点（x1），鼠标开始滑动时记录滑动到的第一坐标点（x2），这样我们就有了2个坐标点，再通过canvas中的stroke()事件将第一个坐标点与第二个坐标点连接起来变成线。然后将（x2）坐标点赋值给（x1），继续滑动鼠标。这时（x1）的值为滑动到的第一个坐标点，（x2）为当前坐标点，继续连线。最后松开鼠标，触发我们人为设置的控制开关paint = false，循环终止，坐标轴停止赋值。一段线段便完成。

   down(e) {
   
      // 鼠标按下事件
      const x = e.offsetX;
      const y = e.offsetY;

      this.startPoint = {
   
        x: x,
        y: y,
      };

      if (this.eraser) {
    // 启用橡皮擦
        this.cxt.clearRect(x, y, 10, 10);
      }

      this.paint = true;
    },

    move(e) {
   
      // 鼠标移动事件
      e.preventDefault();
      const x = e.offsetX;
      const y = e.offsetY;

      this.