vue canvas绘制点、直线、矩形、圆、多边形；以及点击选中高亮；拖拽、放大缩小；明暗度调节

<template>
  <div>
    <canvas id="canvas" @mousedown="startDraw" @mousemove="drawing" @mouseup="endDraw" @mouseleave="endDraw"></canvas>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      canvas: null,
      ctx: null,
      isDrawing: false,
      lastX: 0,
      lastY: 0,
      clickX: 0,
      clickY: 0,
      rect: {
        x: 0,
        y: 0,
        width: 1,
        height: 1
      },
      drag: false,
      startX: 0,
      startY: 0,
      offsetX: 0,
      offsetY: 0,
      scale: 1,
      oldScale: 1,
      zoom: 1.1
    };
  },
  methods: {
    drawPoint(x, y, size) {
      this.ctx.beginPath();
      this.ctx.arc(x, y, size, 0, 2 * Math.PI);
      this.ctx.fill();
    },
    drawLine(startX, startY, endX, endY, color, lineWidth) {
      this.ctx.beginPath();
      this.ctx.moveTo(startX, startY);
      this.ctx.lineTo(endX, endY);
      this.ctx.strokeStyle = color;
      this.ctx.lineWidth = lineWidth;
      this.ctx.stroke();
    },
    drawRectangle(x, y, width, height, color, lineWidth) {
      this.ctx.beginPath();
      this.ctx.rect(x, y, width, height);
      this.ctx.strokeStyle = color;
      this.ctx.lineWidth = lineWidth;
      this.ctx.stroke();
    },
    drawCircle(x, y, radius, color, lineWidth) {
      this.ctx.beginPath();
      this.ctx.arc(x, y, radius, 0, 2 * Math.PI);
      this.ctx.strokeStyle = color;
      this.ctx.lineWidth = lineWidth;
      this.ctx.stroke();
    },
    drawPolygon(points, color, lineWidth, fillColor) {
      this.ctx.beginPath();
      this.ctx.moveTo(points[0], points[1]);
      for (let i = 2; i < points.length; i += 2) {
        this.ctx.lineTo(points[i], points[i + 1]);
      }
      this.ctx.closePath();
      this.ctx.strokeStyle = color;
      this.ctx.lineWidth = lineWidth;
      this.ctx.fillStyle = fillColor;
      this.ctx.fill();
      this.ctx.stroke();
    },
    startDraw(e) {
      this.isDrawing = true;
      this.lastX = e.offsetX;
      this.lastY = e.offsetY;
      this.clickX = e.offsetX;
      this.clickY = e.offsetY;
      if (this.drag) {
        this.startX = this.rect.x;
        this.startY = this.rect.y;
        this.offsetX = e.offsetX - this.rect.x;
        this.offsetY = e.offsetY - this.rect.y;
      }
    },
    drawing(e) {
      if (this.isDrawing) {
        this.lastX = e.offsetX;
        this.lastY = e.offsetY;