HTML多Canvas元素绘制图像尺寸不一致及网格绘制失效的技术问询

先给你理清楚一个Canvas的关键知识点：Canvas元素有两个完全独立的尺寸属性：

1. HTML标签上的width/height属性：这是Canvas的「绘图缓冲区分辨率」，也就是你用drawImage这类API时使用的“逻辑像素”，浏览器默认值是300x150。
2. CSS样式里的width/height：这是Canvas在页面上的「显示尺寸」，浏览器会把绘图缓冲区里的内容拉伸或压缩到这个尺寸展示。

你的所有问题本质上都是这两个尺寸不匹配导致的，下面逐个解答：

1. 为什么两个drawImage的显示尺寸差这么多？ #

问题出在两个Canvas的缓冲区和显示尺寸的比例完全不一样：

• 第一个Canvas（#deckCover）：你没设置它的HTMLwidth/height，所以用了默认的300x150缓冲区；但CSS让它显示成父容器#deckRow的32%宽、98%高（也就是≈96px宽，98px高）。所以你写的300是缓冲区的宽度，实际显示时被压缩到了96px。
• 第三个Canvas（#playingBoard）：同样没设置HTML尺寸，默认缓冲区也是300x150，但CSS让它显示成1500x1500。这里的300是缓冲区宽度，实际显示时被放大到了1500px（整整5倍）。
  一个被压缩、一个被放大，自然看起来完全不一样。

2. 不修改CSS尺寸，怎么让两个drawImage效果一致？ #

你需要让绘图时的逻辑像素和页面上的显示像素对齐，有两种简单可靠的方法：

方法1：直接同步缓冲区和CSS尺寸 #

把Canvas的HTMLwidth/height属性设置成和CSS显示尺寸一样的像素值：

// 处理第一个Canvas，自动获取它的CSS显示尺寸
const deckCoverStyle = getComputedStyle(canvas1);
canvas1.width = parseInt(deckCoverStyle.width);
canvas1.height = parseInt(deckCoverStyle.height);

// 处理第三个Canvas，直接用CSS设置的1500px
canvas3.width = 1500;
canvas3.height = 1500;

这样之后，你在drawImage里写的300和150就对应页面上实际的300px和150px，两个Canvas的绘制效果就统一了。

方法2：缩放绘图上下文（适合动态尺寸场景） #

如果Canvas的CSS尺寸可能随时变化，你可以缩放绘图上下文，让逻辑坐标直接对应显示像素：

// 封装一个通用的同步函数
function syncCanvasToDisplay(canvas: HTMLCanvasElement) {
  const ctx = canvas.getContext('2d')!;
  const displayRect = canvas.getBoundingClientRect();
  // 计算缩放比例：显示尺寸 / 缓冲区尺寸
  const scaleX = displayRect.width / canvas.width;
  const scaleY = displayRect.height / canvas.height;
  // 缩放上下文，后续绘图的单位就是显示像素了
  ctx.scale(scaleX, scaleY);
}

// 绘图前调用这个函数
syncCanvasToDisplay(canvas1);
syncCanvasToDisplay(canvas3);

这样不管缓冲区和显示尺寸是什么比例，drawImage的参数都会对应页面上的实际像素大小。

3. 为什么第一个Canvas要用300×150才能“适配”？ #

因为第一个Canvas的默认缓冲区就是300x150，drawImage(...,0,0,300,150)刚好填满了整个缓冲区，然后浏览器把这个300x150的内容拉伸到CSS设置的≈96x98的显示尺寸，所以视觉上看起来图像“适配”了Canvas的显示区域——但这只是缓冲区被拉伸的结果，并不是图像真正匹配了CSS尺寸。

4. 怎么修复30×30网格的绘制问题？ #

同样的道理，playingBoard的默认缓冲区是300x150，你写的50*i是缓冲区的像素，显示时被放大5倍，自然会重叠或者超出范围。只需要先把缓冲区尺寸同步到CSS的1500x1500，再绘制网格就行：

// 先设置缓冲区尺寸等于CSS显示尺寸
canvas3.width = 1500;
canvas3.height = 1500;

// 然后绘制网格
empty_img.onload = () => {
  for (let i=0; i<30; i+=1){
    for (let j=0; j<30; j+=1){
      ctx3.drawImage(empty_img, 50*i, 50*j, 50, 50);
    }
  }
};

这样每个50px的网格单元就对应页面上的50px，30×30刚好填满1500x1500的画布，完全符合你的预期。

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