Canvas声明尺寸与实际不符，如何将饼图设置为200*200？

一、修复饼图200×200显示问题 #

Canvas有两个核心尺寸属性，搞混了就会出现尺寸异常：

• 原生width/height属性：控制绘图缓冲区的像素数量，是Chart.js绘制图表的基础尺寸
• CSS的width/height：控制Canvas在页面上的显示大小

你看到的1000×1000是Chart.js的默认绘图缓冲区尺寸，说明要么没给Canvas设置原生尺寸，要么初始化配置被默认的响应式规则覆盖了。按以下步骤修复：

1. 给Canvas标签设置原生尺寸：

   <canvas id="myPieChart" width="200" height="200"></canvas>
   

2. 用CSS固定显示尺寸：

   #myPieChart {
     width: 200px !important;
     height: 200px !important;
   }
   

   加!important是为了避免其他全局样式覆盖你的设置。
3. 调整Chart.js初始化配置：
   默认情况下responsive是开启的，会自动调整Canvas尺寸。要固定尺寸就关闭它：

   const ctx = document.getElementById('myPieChart').getContext('2d');
   new Chart(ctx, {
     type: 'pie',
     data: {
       labels: ['Label 1', 'Label 2', 'Label 3'],
       datasets: [{
         data: [30, 50, 20],
         backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
       }]
     },
     options: {
       responsive: false, // 关闭响应式，强制使用设置的尺寸
       maintainAspectRatio: false // 取消宽高比限制，严格匹配200×200
     }
   });
   

二、代码显示不一致的原因 #

1. Chart.js自动修改DOM：初始化图表时，Chart.js会根据配置或容器大小动态调整Canvas的width/height属性，导致开发者工具看到的DOM和你编写的原始代码不一样
2. 前端框架渲染覆盖：如果用了React、Vue等框架，框架的虚拟DOM渲染机制可能会覆盖你手动设置的Canvas属性
3. 浏览器缓存或插件影响：浏览器缓存了旧的页面资源，或者第三方插件（如广告拦截器）修改了DOM结构
4. 样式优先级冲突：页面中其他CSS规则（比如全局的canvas样式）优先级更高，覆盖了你设置的尺寸属性

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