Vue 中 canvas 的自适应

云游君

发布于 2021-05-21 10:36:21

1.3K0

发布于 2021-05-21 10:36:21

文章被收录于专栏：云游的小教程

最近又在写一些没什么用的小玩意儿。 ref: https://github.com/YunYouJun/star-timer/blob/master/docs/.vuepress/components/StarMap.vue

在过程中尝试使用 Vue 来实现 Html5 中 Canvas 标签的自适应。

<template>
  <canvas id="star-map" ref="starMap">
    Sorry, your browser doesn't support the &lt;canvas&gt; element.
  </canvas>
</template>

window.onresize 方法挂载在 mounted 方法上。（mounted 可参见 Vue 生命周期钩子）

<script>
export default {
  name: 'StarMap',
  mounted () {
    this.resizeCanvas();
    this.drawStarMap();
    window.addEventListener("resize", () => {
      this.resizeCanvas();
      // 等待 canvas 变换好，再延时绘制，不然可能会没有内容
      setTimeout(function() {
        this.drawStarMap();
      }, 100);
    });
  },
  methods: {
    resizeCanvas() {
      this.canvas = document.getElementById("star-map");
      let parentStyle = window.getComputedStyle(this.canvas.parentNode);
      this.canvas.width = parseInt(parentStyle.width);
      this.canvas.height = document.body.clientHeight - 400;
    },
  }
}
</script>