Canvas 基础（二）—— 滚动条问题

canvas 系列：

一般在使用 canvas 的时候，都会设置为容器的宽高，这样可以撑满容器。

但是设置完成后总是会出现滚动条？怎么回事？

复现问题

下面是 canvas 动态获取父级容器的宽高，代码如下（vue）：

<template>
  <div ref="Box" >
    <canvas id="tempCanvas" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      canvasWidth: 1000,
      canvasHeight: 500
    }
  },
  mounted() {
    this.canvasWidth = this.$refs.Box.clientWidth
    this.canvasHeight = this.$refs.Box.clientHeight


      const canvasEle = document.getElementById('tempCanvas')
      canvasEle.width = this.canvasWidth
      canvasEle.height = this.canvasHeight
      canvasEle.style.width = this.canvasWidth + 'px'
      canvasEle.style.height = this.canvasHeight + 'px'
  }
}
}
</script>