Vue 中 canvas 的自适应

本文最后更新于6 年前，文中所描述的信息可能已发生改变。

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

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

html

<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 生命周期钩子）

vue

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