canvas填坑录

注意事项:

• 使用canvas进行缩放的时候, 缩放只是对于画布进行缩放, 缩放之后得重新绘制
• 在实现的过程中, 获取到的外层元素一直为0, 由于通过class去获取的, 不唯一, 只拿到第一个

canvas适配各屏幕
/*
 * @Author: mikey.zhaopeng 
 * @Date: 2020-03-13 13:55:17 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2020-03-13 15:25:30
 绘制出来的时候都应该进行一定的缩放
 */
<template>
  <div class="box">
    <div id="contain-canvas">
      <canvas id="canvas"></canvas>
      <!-- <img src="@i/analyzemodel.png" alt /> -->
    </div>
  </div>
</template> 

<script>
import { getExamSite } from "@a/apis";
export default {
  name: "basecanvas",

  components: {},
  data() {
    return {
      ctx: "",
      canvas: "",
      points: [],
      trackPoints: [
        {
          x: 230,
          y: 240
        },
        {
          x: 240,
          y: 260
        },
        {
          x: 250,
          y: 266
        },
        {
          x: 260,
          y: 270
        },
        {
          x: 270,
          y: 220
        },
        {
          x: 280,
          y: 210
        }
      ]
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.getExamSite();
    this.initCanvas();
    this.getFatherWidth();
    $(window).resize(this.resizeCanvas);
  },
  beforeDestroy() {
      $(window).unbind('resize', this.resizeCanvas);
  },
  methods: {
    /**
     * 初始化canvas
     */
    initCanvas() {
      this.canvas = document.getElementById("canvas");
      this.ctx = this.canvas.getContext("2d");
    },
    /**
     * 获取父元素的宽度, 然后设置给canvas
     */
    getFatherWidth() {
      this.canvas.width = document.querySelector("#contain-canvas").clientWidth;
      this.canvas.height = document.querySelector(
        "#contain-canvas"
      ).clientHeight;
    },
    /**
     * 获取场地
     */
    async getExamSite() {
      let res = await getExamSite({});
      if (res.success) {
        this.points = res.data;
        this.drawCanvs();
      }
    },
    /**
     * 改变canvas画布大小
     */

    resizeCanvas() {
      console.dir(document.querySelector("#contain-canvas"));
      var scarX =
        this.canvas.width /
        document.querySelector("#contain-canvas").clientWidth;
      this.ctx.scale(scarX, scarX);
      this.getFatherWidth();
      this.drawCanvs();
    },
    /**
     * 绘制场地外围
     */
    drawCanvs() {
      this.ctx.beginPath();
      this.ctx.moveTo(this.points[0].x, this.points[0].y);
      /**设置字体和绘制连线 */
      this.points.forEach((item, index) => {
        this.ctx.lineTo(item.x, item.y);
        this.ctx.font = "16px Arial";
        this.ctx.fillStyle = "#ccc";
        this.ctx.fillText(index + 1, item.x + 2, item.y - 6);
      });

      this.ctx.closePath();
      this.ctx.strokeStyle = "#61d3eb";
      this.ctx.stroke();
      this.ctx.save();
      this.ctx.beginPath();

      this.ctx.moveTo(this.points[2].x, this.points[2].y);
      this.ctx.lineTo(this.points[5].x, this.points[5].y);
      this.ctx.setLineDash([2, 2]);
      this.ctx.strokeStyle = "#61d3eb";
      this.ctx.stroke();
      this.ctx.restore();
      this.ctx.beginPath();
      /**绘制小点 */
      this.points.forEach(item => {
        this.ctx.moveTo(item.x, item.y);
        this.ctx.arc(item.x, item.y, 4, 0, 2 * Math.PI);
      });
      this.ctx.fillStyle = "#71d3eb";
      this.ctx.fill();
    },
    /**
     * 绘制运动轨迹
     */
    drawTrack() {
      this.ctx.beginPath();
      this.ctx.moveTo(this.trackPoints[0].x, this.trackPoints[0].y);
      this.trackPoints.forEach(item => {
        this.ctx.lineTo(item.x, item.y);
      });
      this.ctx.stroke();
    },
    /**
     * 绘制图片
     */
    drawImg() {
      this.ctx.save();
      this.ctx.clearRect(0, 0, 1200, 600);
      this.ctx.translate(200, 150); // 1
      this.ctx.rotate(-Math.PI / 4); // 2
      this.ctx.drawImage(document.querySelector("img"), 250, 250, 80, 60);

      this.ctx.restore();
      this.drawCanvs();
      this.drawTrack();
    }
  }
};
</script>

<style scoped lang='less'>
.box {
  width: 100%;
  height: 100%;
  padding-top: 10%;
}
#contain-canvas {
  .wh;
}
#canvas {
  display: block;
  background-color: #2c1c55;
}
</style>