如何预缩放并缓存HTML5 Canvas游戏中的Tile图片？

问题核心是每次调用drawImage时实时缩放图片会触发性能开销，尤其是每秒绘制几百个Tile时更明显。你需要预渲染缩放后的Tile图片，把缩放操作只做一次，之后全程复用缩放后的版本。

具体实现步骤： #

利用离屏Canvas预缩放每个Tile的图片，替换原图片对象：

1. 写一个预缩放函数，把原始图片缩放到目标尺寸，返回一个Canvas对象（Canvas可以直接作为drawImage的源）：

function scaleTile(originalImg, targetSize) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = targetSize;
  canvas.height = targetSize;
  // 一次性把原图缩放到目标尺寸并绘制到离屏Canvas
  ctx.drawImage(originalImg, 0, 0, targetSize, targetSize);
  return canvas;
}

2. 在确定好tileSize后（比如适配屏幕完成后），遍历所有Tile，替换它们的图片为预缩放后的Canvas：

// 确保所有Tile的原始图片都已加载完成再执行此操作
tiles.forEach(tile => {
  tile.image = scaleTile(tile.image, tileSize);
});

3. 后续绘制时，直接使用预缩放后的Canvas，无需再指定宽高（或者指定也可以，但不会触发实时缩放）：

ctx.drawImage(tile.image, xCoord, yCoord);
// 或者等价写法，因为Canvas本身的宽高就是tileSize
// ctx.drawImage(tile.image, xCoord, yCoord, tileSize, tileSize);

为什么修改img的width/height没用？ #

HTMLImageElement的width和height只是控制DOM中图片的显示尺寸，Canvas的drawImage方法绘制时，会优先使用图片的naturalWidth和naturalHeight（即图片的原始像素尺寸），所以修改DOM属性不会改变Canvas绘制时的像素尺寸，自然无法避免实时缩放的性能开销。

注意事项 #

• 必须确保原始图片已经完全加载完成后再执行预缩放，否则会得到空白的Canvas。如果是异步加载图片，要在img.onload回调中处理缩放逻辑。

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