HTML5 Canvas宽高异常：矩形宽高设置相同却显示比例不等

嘿，这个问题我之前开发小游戏时也踩过坑！问题的核心在于Canvas有两个独立的尺寸属性，你现在只设置了其中一个，导致绘图被拉伸变形了。

问题根源 #

你在CSS里设置的width: 1920px; height: 1080px;是Canvas元素在页面上的显示尺寸，但Canvas内部还有一个绘图缓冲区尺寸（也就是画布的实际分辨率），默认是300x150。当这两个尺寸比例不一致时，所有绘制的图形都会被强制拉伸适配显示尺寸：

• 你的缓冲区高度是150，显示高度是1080，拉伸比例是1080/150 = 7.2
• 缓冲区宽度是300，显示宽度是1920，拉伸比例是1920/300 = 6.4
  所以你画的100x100矩形，实际显示出来是100*6.4 = 640px宽，100*7.2 = 720px高，视觉上自然会显得高度比宽度长很多。

解决方案 #

让绘图缓冲区尺寸和显示尺寸完全匹配就行，有两种简单的实现方式：

方案一：直接在HTML标签上设置属性

给<canvas>标签添加width和height属性，值和CSS里的显示尺寸一致：

<canvas id='canvas' width="1920" height="1080" style='border: 1px solid; width: 1920px; height: 1080px;'>

方案二：用JavaScript动态设置（适合响应式场景）

如果你的游戏需要适配不同屏幕大小，可以用JS同步缓冲区和显示尺寸：

const canvas = document.getElementById('canvas');
// 同步缓冲区尺寸与元素实际显示尺寸
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;

// 如果需要支持窗口大小变化，监听resize事件重新设置
window.addEventListener('resize', () => {
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
  // 这里需要重新绘制你的游戏元素
});

这样设置后，你画的100x100矩形就会严格按照1:1的比例显示，不会再出现变形问题啦！

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