如何有效调整canvas元素尺寸？设置宽高后仍占满页面如何解决

Chart.js 默认开启了响应式适配逻辑，会忽略canvas元素上设置的原生宽高属性，自动拉伸以填满父容器。如果canvas的父元素未设置尺寸限制，就会出现占满整个页面的情况。

你可以根据需求选择以下任意一种方案：

• 方案一：固定canvas尺寸，关闭响应式配置
  初始化Chart实例时，在options中添加如下配置，即可让canvas读取你设置的200*200尺寸：

  const myChart = new Chart(document.getElementById('myChart'), {
    type: 'pie',
    data: {/* 你的饼图数据 */},
    options: {
      responsive: false,
      maintainAspectRatio: false
    }
  })
  

• 方案二：保留响应式能力，通过父容器限制尺寸
  如果你需要饼图可以自适应容器大小，不需要关闭响应式，只需要给canvas外层套一个设置了固定宽高的父元素即可：

  <div style="width: 200px;height: 200px;">
    <canvas id="myChart"></canvas>
  </div>
  

内容的提问来源于stack exchange，提问作者ngumah