我可以预缩放和缓存图像吗？

Question

我有一个游戏，它以每秒 60 帧的速度在 HTML5 画布上绘制 324 个图块。 当tilesize设置为固定数量的像素并与源图像文件的像素匹配时，它工作得很好。 我更新了游戏以在加载时调整大小以适应用户的屏幕。一切仍然正常，但游戏现在有点滞后。我的假设是这是由每次绘制时调整图像大小引起的。 我使用drawImage()方法如下：

ctx.drawImage(image, xCoord, yCoord, tileSize, tileSize);

我尝试在获得新的tileSize后修改每个图块图像的宽度和高度：

tiles.forEach((tile) => {
   tile.image.height = tileSize;
   tile.image.width = tileSize;
}

这些值保留在对象中，但如果我在不指定宽度和高度的情况下调用drawObject，它们将按其naturalHeight和naturalWidth绘制。

如何调整图像大小并存储调整后的版本以供整个程序使用？

Answer 1

您可以

ctx.getImageData

调整大小的图像，然后将其与

putImageData

一起用于下一次迭代。

在这个例子中，我加载了一个图像，调整了它的大小，将其捕获到变量

resizedImage

，然后在另一个画布上使用它。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

var img = new Image();
var resizedImage

img.onload = function() {
  ctx.drawImage(img, 0, 0, 200, 200); 
  resizedImage = ctx.getImageData(0, 0, 200, 200)
  
  // now on, use resizedImage
  var canvas2 = document.getElementById('myCanvas2');
  var ctx2 = canvas2.getContext('2d');  
  ctx2.putImageData(resizedImage, 0, 0)
  
  // is it faster than?
  // ctx2.drawImage(img, 0, 0, 200, 200); 

};

img.crossOrigin="anonymous"
// 100 x 100
img.src = 'https://picsum.photos/100/100'

canvas {
  border: 1px solid black;
}

<canvas id="myCanvas" width="200" height="200"></canvas>
<canvas id="myCanvas2" width="200" height="200"></canvas>